html5 视口,HTML5样板：元视口和宽度=设备宽度(HTML5 Boilerplate: Meta viewpo

我建立一个自适应/响应的网站。

对此近期变化的HTML5BP：

“ 移动/ iOS的CSS的修改 ”

我已经开始使用：

......我有这在我的CSS：

html {

-webkit-text-size-adjust: 100%;

-ms-text-size-adjust: 100%;

}

当initial-scale=1被列入，从垂直旋转至水平(在iPad / iPhone)引起的布局，以从2列(例如)更改为3列(由于美达查询， initial-scale=1和JS修复程序视口比例的bug )。

总之 ，当在横向模式下，此缩放页面：

...这并不：

注：查看时，您可以在行动中看到这个缩放效果HTML5BP网站上的iPad / iPhone的。

我的问题：

难道这成为新的标准(即变焦时在横向模式下)？

我有一个时间解释这个变化对我的同事和老板赫克......他们看惯了在水平模式不同的布局; 现在的网页缩放和布局保持一致(除了它的大)。 (其中，我可能会被包括在内)就如何解释这无知的群众有什么建议？

@robertc：谢谢！ 这是非常有帮助的。

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

我只注意到了HTML5BP 在github的index.html ，并且该网站 ，使用 ; 对我来说，这是个好足够的理由抛弃initial-scale=1 ，但我得到竖起眉毛，当我试图解释这些事情了“非怪才”。 ：d

Answer 1:

这不是一个新的标准，它是如何它总是AFAIK工作。 如果宽度设置为固定的像素数，然后旋转纵向到横向只是改变了尺度，因为虚拟的像素数保持不变。 我猜，添加initial-scale=1为您之间切换阻止缩放-这是作为设备旋转你的页面的缩放因子不会改变。 并在页面看什么，如果你最初加载它在横向而不是纵向的像？

我建议，如果你想，当你指定你的行为initial-scale=1 ，则指定initial-scale=1 。 HTML5的样板是什么你应该修改以满足自己的要求。

Answer 2:

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

主要是，设备宽度和设备高度在IOS设备是指在纵向模式下，屏幕尺寸。 如果设置了视口宽度设备宽度，它是相同的将其设置为一恒定值 。 因此，当屏幕的物理宽度一个方面变化而变化时，浏览器延伸您输入的用于在横向模式的屏幕的宽度的恒定大小。 此行为是又不正确，它只是为。

苹果建议width=device-width为量身定做的平台的应用程序，所以它肯定是做的“苹果”的方式：

如果你是专门为iOS设计Web应用程序，那么您的网页所推荐的大小是iOS上的可视区域的大小。 苹果建议您将宽度设置为设备宽度，这样的规模在纵向1.0，当用户改变为横向视口不能调整大小。 [即。 视口保留画像装置的宽度，但是缩放或拉伸以呈现给适合风景宽度]

就个人而言，我更喜欢初始规模= 1.0，没有绝对的装置宽度设置的办法，因为它使视口总是填充设备屏幕不拉伸。 苹果认为，这有效的标记，以及：

图3-14示出了当初始比例设定为1.0 iPhone上的相同的网页。 Safari浏览器在iOS推断的宽度和高度，以适应网页的可视区域。 视口宽度在横向纵向定向和设备高度设置为设备宽度。

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 )

转换为...

@viewport{

zoom: 1.0;

width: extend-to-zoom;

}

@-ms-viewport{

width: extend-to-zoom;

zoom: 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/

Answer 4:

我发现Mozilla的视窗解释最详细和最有帮助的。 下面是一个摘录：

width属性控制视口的大小。 它可以被设置为一样的像素的具体数量width=600或到处于CSS像素在屏幕的以100％分的宽度的特殊值设备宽度值。 (有对应height和device-height值，其可以是用于基于视口高度改变大小或位置元件的页面是有用的。)

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

Answer 5:

你试试这个？

文章来源: HTML5 Boilerplate: Meta viewport and width=device-width