【问题标题】:meta viewport has no effect in Chrome Device Mode元视口在 Chrome 设备模式下无效
【发布时间】:2025-10-01 13:25:02
【问题描述】:

这些是重现问题的步骤(在 Linux 和 Mac 中使用 64 位 Chrome 53.0.2785.101 和 Chromium 53.0.2785.143 进行测试)

  1. 复制这个简单的 HTML 代码并将其粘贴到一个新文件中









初始比例



Lorem ipsum dolor sit amet, consectetur adipisicing elit。 Optio 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。 Minus voluptas facere odio fuga aliquam 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 necessitatibus nam cumque repudiandae itaque recusandae minus hic exercitationem soluta officia voluptates neque quia maxime voluptatum eaque sed!


正文>

标签: html google-chrome-devtools responsive


【解决方案1】:

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

无标签:

带标签:

尝试在<!----> 注释分隔符和注释文本之间添加一个空格。

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

还请注意,我同时设置了widthinitial-scale,这是best practices doc 推荐的方式。但是,当我像你一样只设置 width 时,它对我有用:

【讨论】:

  • 你是对的!评论引起了问题。但我仍然感到困惑:我期待的恰恰相反。我的意思是:没有元的较小文本。因为浏览器认为内容是为 980px 宽度创建的。所以,它被缩放到那个大小。这就是视频所说的。或者我没看明白:youtube.com/watch?v=6P9uLyvcd3Y
  • 另外,感谢关​​于初始规模的建议。但我的意图实际上是显示 not 使用它的效果。对我来说,它的使用没有任何区别。无论有没有初始规模,我都看到了同样的情况。我期待这里解释的缩放效果:css-tricks.com/probably-use-initial-scale1
  • 好的,在实际的 iPhone 上进行了测试,它的行为符合我的预期。但在 Chrome iPhone 6 模拟器中,它没有。我不知道这是 Chrome 的问题还是正常的。