元视口在Chrome设备模式下无效

Question

这些是重现问题的步骤（使用Chrome 53.0.2785.101和Chromium 53.0.2785.143测试，均为64位，在Linux和Mac中测试）

1. 复制此简单HTML代码并将其粘贴到新文件中

＆lt;！DOCTYPE html＆gt;
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆lt; meta charset =＆＃34; UTF-8＆＃34;＆gt;

＆lt ;! - 取消注释。它对chrome设备模式（dev工具的一部分）没有影响。它没有故意包含initial-scale = 1 - ＆gt;
＆lt;！ - meta name =＆＃34; viewport＆＃34;含量=＆＃34;宽度=设备宽度＆＃34; - ＆GT;

＆lt; title＆gt;初始比例＆lt; / title＆gt;
＆LT; /头＆GT;
＆LT;身体GT;
＆lt; p＆gt;
Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Opo in illo nisi totam eaque ipsam asperiores est nemo dolor ab commodi corporis nostrum voluptas sint corrupti quo obcaecati dolores expedita。
Lorem ipsum dolor sit amet，consectetur adipisicing elit。减去肛门屁股odio fuga aliquit velit perferendis cum ut officiis ex quia delectus sint alias soluta saepe libero dolor odit exercitationem！
Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Perspiciatis aut possimus facere必需品nam cumque repudiandae itaque recusandae minus hic exercitationem soluta officia voluptates neque quia maxime voluptatum eaque sed！
＆lt; / p＆gt;
＆LT; /体＆GT;
＆LT; / HTML＆GT;

1. 在设备模式下使用Google Chrome打开它。模拟任何终端，甚至使用响应模式。

我的期望：微小的文字。由于this video中解释的效果：浏览器将宽度默认为980px（典型的桌面浏览器宽度）

我得到的内容：文字大小正常。检查截图

所以，第一个问题：为什么我看不到文字很小，就像在视频中解释的那样？

更新：我的猜测：Chrome正在进行font boosting吗？

现在，第二个实验。只需取消注释元视口标记。目的是重现this zooming effect，由于缺少初始比例= 1。因此，在iPhone 5模拟器中打开网页，并使用纵向/横向模式。

我的期望：链接中说明的缩放效果。屏幕宽度在横向模式下已经改变，因此，如果没有initial-scale = 1，我应该看到文本缩放。

我得到的内容：文字在纵向和横向模式下保持相同的大小。但是我没有应用initial-scale = 1修饰符...

检查屏幕截图



所以，第二个问题：为什么我不需要初始比例= 1来使文本在横向模式下看起来不错？

在this example,中，它按照我的预期发生：

• 文字最初很小（没有元视口）

• 如果我添加元视口完整，一切都适合。

Answer 1

我认为这与您格式化这些HTML评论的方式有关。

没有标签：

带标签：

尝试在<!--和-->评论分隔符与评论文字之间添加空格。

我不太了解规范，但我认为您的评论格式是有效的，但由于某种原因，它会导致错误。

另请注意，我设置了width和initial-scale这是best practices doc推荐它的方式。但是，当我像你一样设置width时，它为我工作：