我无法弄清楚新 Chrome 的设备模拟面板中“模拟视口(viewport)”选项的行为。
取消选中时，一切正常。我可以在浏览器中可视化设备视口(viewport)，并且我在代码中所做的更改在浏览器中正确可视化。
虽然选中该选项(如默认情况下)，但它完全误解了我的布局。出现水平滚动条(即使使用 .container{max-width: 100%;} 或 overflow: hidden )，字体渲染得比应有的大，浏览器似乎忽略了我对 CSS 的更改。
在 documentation 中，我读到:
有人可以用简单的英语翻译这个选项激活什么样的行为，我为什么要保持标记？
最佳答案
我有类似的问题。当我简单地改变窗口的分辨率时，一切都会根据屏幕宽度很好地呈现。但是每当我尝试使用设备模拟器在 Chrome 中进行模拟时，列都不会改变它们的大小并以其物理宽度显示在屏幕上。然后，我想出将以下行添加到 html 文件的部分。希望有帮助。
<meta name="viewport" content="width=device-width, initial-scale=1">
关于css - Chrome Canary 设备模拟面板中的模拟视口(viewport)选项 : Weird behavior，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22665554/