我无法弄清楚＆＃34;模拟视口的行为＆＃34;新Chrome设备模拟面板中的选项。
如果未经检查，一切正常。我可以在浏览器中可视化设备视口，并且我在代码中所做的更改可以在浏览器中正确显示。
当选中该选项时（默认情况下），它会完全弄乱我的布局。出现水平滚动条（即使使用.container{max-width: 100%;}或overflow: hidden），字体的渲染方式也应该比它应该大，浏览器似乎忽略了我对CSS的更改。
在documentation中，我读到了：
模拟视口 - 将页面缩小到该设备的物理默认视口。在Nexus 4的情况下，这是768x1280。
有人可以用简单的英语翻译这个选项激活的行为，为什么我要保持标记？
答案 0 :(得分：3)
我有类似的问题。当我只是改变窗口的分辨率时，一切都会根据屏幕宽度很好地呈现。但每当我尝试使用设备模拟器在Chrome中进行模拟时，列不会改变其大小并在屏幕上显示其物理宽度。然后，我想到将以下行添加到html文件的部分。希望有所帮助。
<meta name="viewport" content="width=device-width, initial-scale=1">