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

Question

所以昨晚我将全新的网站上传到了Heroku，使用React将我的全新网站上传到Heroku，今天早上我醒来只是为了'欣赏我的网站'，我发现它没有出现在移动优化方面也应该使其与众多设备和平板电脑兼容。我没有任何代码可以向您展示，除了我用来定位Google Chrome开发人员工具(Samsung S5，Nexus，Nexus，iPhone和iPad(的当前" @Media"代码段。这就是我到目前为止涵盖一切的内容：

网站：

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

星系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＆amp;8

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

iPhone 7＆amp;8加

@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(和Dev Tools，以显示特定设备的屏幕时，所有这些都正确显示了。但是，当我访问仍在使用所选设备分辨率的网站时，它显示出完美的状态。但是当我使用我的iPhone 7加上一切看起来都很混乱。这里的问题似乎是什么？

编辑：我以前做过此操作，并且效果很好。这次我所做的不同之处在于，我目前正在使用Create-React-App。上次我使用SASS和WebPack时，这可能是问题吗？

Answer 1

，而不是在CSS中添加太多，而是尝试添加：

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

这应该为所有设备都能解决。