Question

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

关于最近对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">

注意： 在iPad / iPhone上查看HTML5BP website时，您可以看到此缩放效果。

我的问题：

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

@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是您应该修改以满足您自己的要求。

Answer 2

Apple [稍微]清楚地描述了视口行为here。

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

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

如果您正在设计专门针对iOS的Web应用程序，那么建议的网页大小是可见区域的大小 iOS版。 Apple建议您将宽度设置为设备宽度，以便纵向为1.0，视口为纵向当用户更改为横向方向时调整大小。 [即。视口保留纵向设备宽度，但缩放或拉伸以进行显示以适应横向宽度]

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

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

Answer 3

添加一些更新：这仍处于草稿形式，但绝对值得关注。还有一个IE 10支持的前缀版本。通过使用CSS而不是HTML，它可以通过将initial-scale:1;应用于zoom:1;并为{{min / max提供选项来消除您所说的很多混乱。 1}}，width，＆amp; height如果需要，它会进一步增加调整范围。

zoom救援！（http://dev.w3.org/csswg/css-device-adapt/#lsquoextend-to-zoomrsquo）

extend-to-zoom转换为...

<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%;

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

Answer 4

我发现Mozilla's viewport explanation最详细，最有帮助。这是一段摘录：

width属性控制视口的大小。它可以设置为特定数量的像素，如width=600，也可以设置为特殊值device-width值，它是CSS像素中屏幕宽度的100％。（对应的height和device-height值可能对包含根据视口高度更改大小或位置的元素的页面有用。）

initial-scale属性控制首次加载页面时的缩放级别。 maximum-scale，minimum-scale和user-scalable属性控制用户如何放大或缩小页面

Answer 5

你试过这个吗？

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

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

5 个答案: