相关疑难解决方法(0)

HTML5 Boilerplate:Meta视口和宽度=设备宽度

我正在构建一个自适应/响应式网站.

关于最近对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=1JS修复为视口比例错误).

总而言之,在横向模式下,这会缩放页面:

<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网站时,您可以看到此缩放效果.

我的问题:

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

@robertc:谢谢!这非常有帮助.

其实我喜欢具有initial-scale=1; 我的同事习惯于看到布局变化而不是缩放.我敢肯定,我将被迫增加initial-scale=1只是为了取悦所有人(因为没有放大,看到布局的变化,是他们已经习惯了看到的).

我刚刚注意到github上的HTML5BP index.html网站正在使用<meta name="viewport" content="width=device-width">; 对我来说,这是放弃的理由initial-scale=1,但当我试图向"非极客" 解释这些事情时,我会引起一阵兴奋.:d

html5 viewport html5boilerplate

41
推荐指数
3
解决办法
10万
查看次数

标签 统计

html5 ×1

html5boilerplate ×1

viewport ×1