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

Question

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

关于最近对HTML5BP的更改:

" 移动/ iOS css修订版 "

我开始使用:

<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列(由于美达查询,initial-scale=1和JS修复为视口比例错误).

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

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

......而这不是:

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

注意:在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

Answer 1

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

我建议如果你想要你指定的行为initial-scale=1,那么指定initial-scale=1.HTML5 BoilerPlate是您应该根据自己的要求进行修改的内容.

Answer 2

苹果[有些]清楚地描述了视口的行为在这里.

首先,iOS设备中的设备宽度和设备高度是指纵向模式下的屏幕尺寸.如果将视口宽度设置为device-width,则与将其设置为常量值相同.因此,当屏幕的物理宽度随宽高比变化而变化时,浏览器会以横向模式将您输入的常量大小拉伸到屏幕宽度.这种行为既不对也不对,它只是.

Apple建议width=device-width针对该平台量身定制的应用程序,因此它肯定是"Apple"的方式:

如果您正在设计专门针对iOS的Web应用程序,则建议的网页大小是iOS上可见区域的大小.Apple建议您将宽度设置为设备宽度,以使纵向方向的比例为1.0,并且当用户更改为横向时,视口不会调整大小.[即.视口保留纵向设备宽度,但缩放或拉伸以进行演示以适应景观宽度]

就个人而言,我更喜欢初始比例= 1.0,没有绝对的设备宽度设置方法,因为它使视口始终填充设备屏幕而不拉伸.Apple也考虑了这个有效的标记:

图3-14显示了在iPhone上将初始比例设置为1.0时的同一网页.iOS上的Safari推断宽度和高度以适合可见区域中的网页.视口宽度设置为纵向的设备宽度和横向的设备高度.

Answer 3

添加一点更新:这仍然是草稿形式,但它绝对是值得研究的.还有一个IE 10支持的前缀版本.通过使用CSS,而不是HTML的它清除了很多你通过应用发言的混乱initial-scale:1;到zoom:1;并给予min/ max选项width,height,和zoom这furter增加如果有需要调整的范围.

extend-to-zoom救援!(http://dev.w3.org/csswg/css-device-adapt/#lsquoextend-to-zoomrsquo)

<meta name="viewport" content="initial-scale=1.0"> 转换为......

@viewport{
  zoom: 1.0;
  width: extend-to-zoom;
}
@-ms-viewport{
  width: extend-to-zoom; 
  zoom: 1.0;
}

在哪里<meta name="viewport" content="width:device-width,initial-scale=1.0">翻译成......

@viewport{
  zoom: 1.0;
  width: device-width; /* = 100vw */
}
@-ms-viewport{
  width: device-width;
  zoom: 1.0;
}

注意:width:extend-to-zoom 100%;等于width:device-width;

http://dev.w3.org/csswg/css-device-adapt/