我正在构建自适应/响应式网站。
关于最近对 HTML5BP 的更改:
我已经开始使用:
<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 上。
我的问题:
- 这是否会成为新标准(即在横向模式下缩放)?
- 我花了很多时间向我的同事和老板解释这个变化......他们习惯于在水平模式下看到不同的布局;现在页面缩放并且布局保持不变(除了更大)。关于如何向无知的大众(其中可能包括我)解释这一点的任何提示?
@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
最佳答案
这不是一个新标准,这是它一直以来的工作方式 AFAIK。如果将宽度设置为固定像素数,则将纵向旋转为横向只会改变比例,因为虚拟像素数保持不变。我猜测添加 initial-scale=1
会在您切换时阻止缩放 - 即页面的缩放因子不会随着设备旋转而改变。如果您最初以横向而不是纵向加载页面,页面会是什么样子?
我建议,如果您想要在指定 initial-scale=1
时获得的行为,请指定 initial-scale=1
。 HTML5 BoilerPlate 是您应该修改以满足您自己的要求的东西。
关于HTML5 样板文件 : Meta viewport and width=device-width,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11006812/