在Chrome Canary设备模拟面板中模拟视口选项：奇怪的行为

Question

3

我无法理解新版Chrome设备模拟面板中的“模拟视口”选项的行为。

当未选中时，一切正常。我可以在浏览器中可视化设备视口，并且我对代码所做的更改可以正确地在浏览器中显示。

但是，当选中该选项时（默认情况下），它会完全破坏我的布局。水平滚动条出现（即使使用.container {max-width: 100%;}或overflow：hidden），字体呈现比应该大得多，并且浏览器似乎忽略了我对CSS的更改。

在文档中，我读到：

“模拟视口” - 将页面缩小到该设备的物理默认视口。在Nexus 4的情况下，这是768x1280。

请问有人能用简单的英语翻译一下此选项激活的行为以及我为什么要保持其标记？

- zool

我无法回答所有问题，但字体变大与https://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust有关，在仿真部分中有一个选项与启用或禁用仿真的这一部分相关，但我记不清确切的措辞了。 - steven

谢谢提示 - 不过还想了解更多。 - zool

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user3941146 · Accepted Answer

我曾经遇到类似的问题。当我简单地改变窗口的分辨率时，所有内容都可以根据屏幕宽度自动适应，但是每当我尝试在Chrome浏览器中使用设备模拟器进行仿真时，栏目的大小不会改变，显示出它们物理宽度的大小。后来，我发现只需要在HTML文件的<head>标签中添加以下代码即可解决问题。希望这能有所帮助。

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