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

Question

因此，昨晚我使用React将我的全新网站上传到了Heroku，当我今天早上醒来只是为了“欣赏我的网站”时，我发现在移动优化方面，它并没有像应有的那样出现特别是使其与众多设备和平板电脑兼容。 除了要用于定位Google Chrome开发人员工具（三星S5，Nexus，iPhone和iPad）中列出的所有设备的当前“ @media”代码段之外，我没有任何代码可以显示给您。 到目前为止，这是我涵盖的所有内容：

网站：

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

Galaxy S：

@media screen and (width: 360px) {

    @media screen and (height: 640px) {

    }
}

Nexus 5X

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

Nexus 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) {
    }
}

iPhone X

@media screen and (width: 375px) {

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

而奇怪的是： 当我在Google Chrome浏览器（和开发工具）中使用localhost（以显示特定设备的屏幕）时，所有屏幕均正确显示。但是，当我仍然使用选定的设备分辨率访问网站时，它显示完美。我使用我的iPhone 7 Plus时，看起来一切都混乱了，这可能是什么问题？

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

Answer 1

您没有尝试在CSS中添加太多内容，而是尝试添加以下内容：

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

这应该可以解决所有设备的问题。