HTML5 样板文件 : Meta viewport and width=device-width

Question

我正在构建自适应/响应式网站。

关于最近对 HTML5BP 的更改:

"mobile/iOS css revisions "

我已经开始使用:

<meta name="viewport" content="width=device-width">

...我的 CSS 中有这个:

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

当 initial-scale=1包括在内，从垂直旋转到水平(在 iPad/iPhone 上)导致布局从 2 列(例如)更改为 3 列(由于 meida 查询，initial-scale=1 和 JS fix for viewport scale bug)。

总结，在横向模式下，这会缩放页面:

<meta name="viewport" content="width=device-width">

... 而这不会:

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

注意:您可以在查看 HTML5BP website 时看到这种缩放效果。在 iPad/iPhone 上。

我的问题:

1. 这是否会成为新标准(即在横向模式下缩放)？
2. 我花了很多时间向我的同事和老板解释这个变化......他们习惯于在水平模式下看到不同的布局；现在页面缩放并且布局保持不变(除了更大)。关于如何向无知的大众(其中可能包括我)解释这一点的任何提示？

---

@robertc:谢谢!这很有帮助。

我实际上不有initial-scale=1 ;是我的同事习惯于看到布局变化而不是缩放。我确定我将被迫添加initial-scale=1只是为了取悦所有人(因为他们习惯于看到不缩放和看到布局变化)。

我刚刚注意到 HTML5BP index.html on github , 和 the website , 正在使用 <meta name="viewport" content="width=device-width"> ;对我来说，这是放弃 initial-scale=1 的充分理由, 但当我试图解释 these things 时，我却感到惊讶给“非极客”。 :D

Answer 1

这不是一个新标准，这是它一直以来的工作方式 AFAIK。如果将宽度设置为固定像素数，则将纵向旋转为横向只会改变比例，因为虚拟像素数保持不变。我猜测添加 initial-scale=1 会在您切换时阻止缩放 - 即页面的缩放因子不会随着设备旋转而改变。如果您最初以横向而不是纵向加载页面，页面会是什么样子？

我建议，如果您想要在指定 initial-scale=1 时获得的行为，请指定 initial-scale=1。 HTML5 BoilerPlate 是您应该修改以满足您自己的要求的东西。