如何指定 Chrome 设备模式的视口默认值？答案

【问题标题】：How to specify Chrome Device Mode's viewport default value?如何指定 Chrome 设备模式的视口默认值？
【发布时间】：2017-02-15 23:53:58
【问题描述】：

我的问题与此类似，但我在这里问是因为那里没有提供真正的答案。 (meta viewport has no effect in Chrome Device Mode)

我试图了解视口元标记如何影响网页，我现在才意识到 Chrome 未能正确模拟导致我数小时的困惑，因为我的测试页面在设备本身上呈现不同。

据我了解，iPhone 5S 上的 iOS 将您的页面默认呈现为 980 像素宽，然后缩小以适应小屏幕。如果您没有元标记来指定宽度和初始比例，则文本会很小。在我的手机上，这正是发生的情况，线条在 980 像素处中断，正如预期的那样。在 Chrome 的设备模式下，字体大小正常且易于阅读，线条在 335 像素左右断开。（即使是 320 像素，这是物理设备宽度？？）

我该如何解决这个问题？它是一个错误吗？是否可以更改设置以使其表现得像物理设备？它让移动测试完全没用，不是吗？

这是用来测试的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>

附：无法弄清楚如何对 Lorem ipsum 文本进行自动换行，抱歉。

【问题讨论】：

标签： html ios google-chrome emulation viewport

【解决方案1】：

只需添加

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

所有页面都将适合屏幕（无 css）。这不是错误，只是浏览器缺少信息。

【讨论】：

我知道添加它会改变它在我手机上的外观，但这不是问题所在。对不起，如果我不清楚。我的观点是，相同的代码应该在我的手机和 Chrome 的设备模式下以相同的方式显示，否则拥有“设备模式”的意义何在。要么是一个错误，要么是 Chrome 中有一个我不知道的设置让它的行为就像物理设备一样。或者也许是别的东西。无论如何，我需要做什么才能使其行为相同？

【解决方案2】：

Chrome 实际上是在忠实地模拟设备。如果您在 Android 上的 Chrome 上运行您的示例，您会发现它看起来与在 DevTools 的设备模式中相同。此外，如果您在 DevTools 中检查 window.innerWidth，您会看到它约为 980，因为缺少视口 <meta> 标记。

您看到的是正在模拟的 Chrome Mobile 的另一个方面：字体增强。在旧版页面（即没有视口 <meta> 标记的页面）上，Chrome 将增大小文本的大小，以便于用户阅读。这使您的页面看起来好像被呈现为比实际更小的宽度。

尝试disabling font boosting 或将图像添加到您的示例中，应该更清楚仿真是否正常工作。

【讨论】：

感谢您的回答，但我没有安卓设备。我正在将“iPhone 5”的 Chrome 开发工具设备模式与我的物理 iPhone 5S 进行比较。他们不应该渲染完全相同吗？除非我没听懂你的回答……
不，Chrome 的移动端仿真仍然只是使用 Blink 渲染引擎来渲染页面。它可以非常接近页面在 Android 上的 Chrome 上的外观，因为它使用相同的引擎。然而，iOS 上的 Chrome 使用内置的 iOS WebView，它使用 WebKit，因此桌面 Chrome 无法完全模拟它。这样做是最好的，但会出现这些差异 - 在大多数情况下，它只是模拟设备尺寸。如果您的页面在设备上的正常运行对您很重要，您应该在真实硬件上进行测试（尤其是性能特征！）
感谢您的解释。虽然，我不确定我是否看到有一个“模拟器”以如此不同的方式显示相同的代码。我想使用它的原因是，我可以看到它的外观，而无需上传，然后使用我的实体手机进行每一个小改动。我知道模拟器不会精确到每一个小细节，但这似乎是一个非常重要的失败。