我的问题与此类似，但我在这里问，因为那里没有提供真正的答案。 （meta viewport has no effect in Chrome Device Mode）
我试图了解视口元标记如何影响网页，而我现在才意识到Chrome无法正常模拟导致我数小时的混乱，因为我的测试页面呈现的方式不同设备本身。
根据我的理解，iPhone 5S上的iOS会将您的页面呈现为宽度为980px，然后缩小以适应小屏幕。如果没有元标记来指定宽度和初始比例，则文本将很小。在我的手机上，这正是发生的事情，线条突破980px，正如预期的那样。在Chrome的设备模式下，该字体是正常大小且易于阅读，并且线条在335px左右突破。 （甚至不是320px，这是物理设备的宽度??）
我该如何解决这个问题？这是一个错误吗？是否有一个设置我可以改变，使其行为像物理设备？它使移动测试完全无用，不是吗？
这是用于测试的HTML。 （没有CSS。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Viewport testing</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
P.S。无法弄清楚如何用Loram ipsum文字自动换行，抱歉。
答案 0 :(得分：0)
添加
<meta name="viewport" content="width=device-width, initial-scale=1.0">
并且所有页面都适合屏幕（没有css）。 这不是一个错误，只是缺少浏览器的信息。
答案 1 :(得分：0)
Chrome实际上是忠实地模仿设备。如果您在Android上的Chrome上运行示例，您会发现它看起来与DevTools中的相同＆＃39;设备模式。此外，如果您在DevTools中检查window.innerWidth，那么在您没有视口<meta>标记的情况下，您会看到它~980。
您所看到的是Chrome Mobile的另一个被模仿的方面：字体提升。在旧版网页（即没有视口<meta>标记的网页）上，Chrome会增加小文字的大小，以便用户更方便地阅读。这使得您的页面似乎被渲染成实际上更小的宽度。
尝试disabling font boosting或在您的示例中添加图片，并且应该更清楚仿真是否正常工作。