我正在构建一个自适应/响应式网站.
关于最近对HTML5BP的更改:
" 移动/ iOS css修订版 "
我开始使用:
<meta name="viewport" content="width=device-width">
Run Code Online (Sandbox Code Playgroud)
...我在我的CSS中有这个:
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Run Code Online (Sandbox Code Playgroud)
当initial-scale=1被包括在内,从垂直旋转到水平(在iPad/iPhone)引起的布局从2列(例如)更改为3列(由于美达查询,initial-scale=1和JS修复为视口比例错误).
总而言之,在横向模式下,这会缩放页面:
<meta name="viewport" content="width=device-width">
Run Code Online (Sandbox Code Playgroud)
......而这不是:
<meta name="viewport" content="width=device-width, initial-scale=1">
Run Code Online (Sandbox Code Playgroud)
注意:在iPad/iPhone上查看HTML5BP网站时,您可以看到此缩放效果.
我的问题:
@robertc:谢谢!这非常有帮助.
其实我喜欢不具有initial-scale=1; 我的同事习惯于看到布局变化而不是缩放.我敢肯定,我将被迫增加initial-scale=1只是为了取悦所有人(因为没有放大,看到布局的变化,是他们已经习惯了看到的).
我刚刚注意到github上的HTML5BP index.html和网站正在使用<meta name="viewport" content="width=device-width">; 对我来说,这是放弃的理由initial-scale=1,但当我试图向"非极客" 解释这些事情时,我会引起一阵兴奋.:d