CSS 移动优化不适用于移动设备

Question

所以昨晚我使用 React 将我全新的网站上传到 Heroku，当我今天早上醒来只是为了“欣赏我的网站”时，我发现它在移动优化方面并没有像它应该出现的那样，甚至尽管我特地让它与许多设备和平板电脑兼容。除了当前的“@media”代码片段外，我没有任何代码可以展示给您，我正在使用这些代码片段来针对 Google Chrome 开发人员工具(三星 S5、Nexus、iPhone 和 iPad)中列出的所有设备。到目前为止，这是我要涵盖的所有内容:

网站:

@media screen and (max-width: 1280px) {}

银河 S:

@media screen and (width: 360px) {

    @media screen and (height: 640px) {

    }
}

连结 5X

@media screen and (width: 412px) {}

连结 6P

@media screen and (width: 412px) {

    @media screen and (height: 732px) {
    }
}

iPhone 7 & 8

@media screen and (width: 375px) {

    @media screen and (height: 667px) {
    }
}

iPhone 7 和 8 Plus

@media screen and (width: 414px) {

    @media screen and (height: 736px) {
    }
}

苹果手机

@media screen and (width: 375px) {

    @media screen and (height: 812px) {
    }
}

奇怪的是；当我在 Google Chrome 中使用 localhost(和 Dev Tools，以显示特定设备的屏幕时，它都显示正确。但是，当我仍然使用所选设备分辨率访问网站时，它显示完美。但是当我使用我的 iPhone 7 Plus，它看起来很乱。这似乎是什么问题？

编辑:我以前做过这个，而且效果很好。这次我所做的不同之处在于，我目前正在使用 create-react-app。我上次使用 Sass 和 webpack 时，会不会是这个问题？

Answer 1

与其在 CSS 中添加这么多内容，不如尝试添加:

<meta name="viewport" content="width=device-width, initial-scale=1">

这应该适用于所有设备。