如何指定Chrome设备模式的视口默认值？
我的问题与此相似，但我在这里问，因为没有提供真正的答案。 （meta viewport has no effect in Chrome Device Mode）如何指定Chrome设备模式的视口默认值？
我想了解视口元标记如何影响网页，我现在只是意识到Chrome的未能正常模拟导致了我几个小时的困惑，因为我的测试页在设备本身呈现不同的效果。
据我所知，iPhone 5S上的iOS将您的页面渲染为980像素宽的图像，然后缩小以适应小屏幕。如果您没有元标记来指定宽度和初始缩放比例，则文本会很小。在我的手机上，正如预期的那样，这正是发生的情况，线条在980像素处断裂。在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.无法弄清楚如何用文字包装Lorem ipsum文本，对不起。
只需添加
<meta name="viewport" content="width=device-width, initial-scale=1.0">
，所有的页面将适合屏幕（无CSS）。 这不是一个错误，只是缺乏浏览器的信息。
Chrome实际上是在忠实地模拟设备。如果您在Android上的Chrome上运行您的示例，则会看到它与DevTools的设备模式中的相同。此外，如果您在DevTools中检查window.innerWidth，您会发现它是〜980，因为您预计缺少视口<meta>标记。
您所看到的是Chrome Mobile的另一个模拟方面：字体提升。在传统网页上（即没有视图<meta>标签的网页），Chrome会提高小文本的大小以方便用户阅读。这使得您的页面看起来好像被渲染成实际上更小的宽度。
尝试disabling font boosting或将图像添加到您的示例，它应该更清楚地表明仿真正常工作。
谢谢你的回答，但我没有Android设备。我将“iPhone 5”的Chrome开发工具设备模式与我的物理iPhone 5S进行了比较。他们不应该完全一样吗？除非我不明白你的答案... – AlwaysLearning
不，Chrome的移动模拟仍然只是使用Blink渲染引擎来渲染页面。它可以非常接近页面在Android上的Chrome上的外观，因为它使用相同的引擎。但是，iOS上的Chrome使用内置的iOS WebView，该WebView使用WebKit，因此桌面版Chrome无法完全模拟它。它是最好的，但是这些差异将会出现 - 大部分情况下，它只是模拟设备尺寸。如果您对您的页面在设备上的正确行为很重要，则应在真实硬件上进行测试（特别是针对性能特征！） –
感谢您的解释。虽然，我不确定我看到让一个“模拟器”显示相同代码的点不同。我想要使用它的理由是，我可以看到它的外观，而无需上传，然后使用我的物理电话进行每一个小改动。我明白一个模拟器并不是每个小细节都准确，但这似乎是一个非常重要的失败。 – AlwaysLearning
我知道添加这将改变它在手机上的外观，但这不是问题。对不起，如果我不清楚。我的观点是，相同的代码*应该*在我的手机和Chrome中的设备模式中显示相同的方式，否则有什么“设备模式”的意义。无论是一个错误还是Chrome中的一个设置，我都不知道如何使它像物理设备一样运行。或者也许是别的。无论如何，我需要做些什么来使其表现相同？ – AlwaysLearning