HTML5模板：Meta viewport和width=device-width

Question

HTML5模板：Meta viewport和width=device-width

htmlviewporthtml5boilerplate

41

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

关于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网站时，您可以看到这种缩放效果。

我的问题：

这是否正在成为新的标准（即横向模式下缩放）？
我正在尽力向同事和老板们解释这种变化...他们习惯于在水平模式下看到不同的布局；现在页面缩放但布局保持不变（只是更大了）。有什么技巧可以向“无知的大众”解释这一点（我可能也包括在内）？

@robertc：谢谢！非常有帮助。

实际上，我喜欢不使用initial-scale=1；而我的同事们习惯于看到布局改变而不是缩放。我肯定会被强制添加initial-scale=1，以取悦所有人（因为他们习惯于不缩放，而看到布局改变），而我刚刚注意到HTML5BP github上的index.html文件和网站使用<meta name="viewport" content="width=device-width">。对我来说，这已经足够理由放弃initial-scale=1，但是当我试图向“非极客”解释这些事情时，他们会抬起眉毛。:D

- mhulse

1

就更新而言，HTML5BP文档表示：“您可以在此元标记中使用几个不同的选项。您可以在Apple开发人员文档中了解更多信息”。 - mhulse

2

哦，我刚注意到他们还链接到“完全傻瓜指南：视口和媒体查询！！！” ...... 我已经读了几遍了，但仍然有点困惑。 :D - mhulse

截至2012年6月25日，这里有一些有趣的信息：（https://github.com/sergiolopes/ios-zoom-bug-fix）。 - mhulse

5个回答

11

在此链接中，Apple [有点]清晰地描述了视口的行为。

主要来说，在iOS设备中，device-width和device-height是指纵向模式下屏幕的尺寸。如果你将视口宽度设置为device-width，则与将其设置为常量值相同。因此，当屏幕的物理宽度随着比例变化而改变时，浏览器会将您输入的恒定大小拉伸到横向模式下的屏幕宽度。这种行为既不正确也不错误，它只是如此。

苹果建议针对该平台定制的应用程序使用width=device-width，因此它肯定是"苹果"的做法：

如果您正在设计专门针对iOS的网络应用程序，则网页的推荐大小是iOS上的可见区域大小。苹果建议您将宽度设置为device-width，以便在纵向方向上缩放为1.0且当用户更改为横向方向时视口不会重新调整大小。[即视口保留纵向设备宽度，但被缩放或拉伸以适应横向宽度的呈现方式]

个人而言，我更喜欢没有绝对device-width设置的initial-scale=1.0方法，因为它可以使视口始终填充设备屏幕而不会拉伸。苹果也认为这是有效的标记：

图3-14展示了当在iPhone上将初始比例设置为1.0时显示的同一网页。iOS上的Safari推断出宽度和高度以适合可见区域内的网页。纵向方向上，视口宽度设置为device-width，在横向方向上，将其设置为device-height。

- trognanders

感谢提供的详细信息和解释。+1。自从发布这个问题以来，我已经决定在<head>中使用<meta name="viewport" content="width=device-width, initial-scale=1"> ，并在我的模板底部添加<script src="ios-orientationchange-fix.js"></script> 。 - mhulse

我也一直在为理解自适应网页设计项目的视口选项而苦恼。非常不幸的是，每个平台的行为都不同。主要关注于Android或Apple的开发人员往往认为只有一种行为，并且当他们尝试另一种行为时经常感到惊讶/担忧。 - le3th4x0rbot

我同意Bailey的观点。我的重点主要集中在iOS设备上，主要是因为我没有方便地接触Android设备。另外，作为最新进展，看起来iOS6已经修复了iOS方向错误的问题。我没有找到任何详细说明这一点的文章，但从我所测试的情况来看，iOS6不再表现出方向“bug”。基于这个新信息，我将停止在我的模板中包含ios-orientationchange-fix脚本。 - mhulse

7

补充一点：这仍然处于草案形式，但绝对值得考虑。还有一个为IE 10支持的前缀版本。通过使用CSS而不是HTML，它消除了你所说的混乱，通过将initial-scale：1; 应用于zoom：1;，并提供width、height和zoom的min/max选项，进一步增加了调整范围，如果需要的话。

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/

- darcher

2

我觉得Mozilla的视口解释是最详细和有用的。以下是一段摘录：

width属性控制视口的大小。它可以设置为像素数，如width=600，也可以设置为特殊值device-width，即CSS像素下屏幕的宽度，比例为100%。（还有相应的height和device-height值，对于基于视口高度改变大小或位置的元素的页面可能很有用。）

initial-scale属性控制页面在首次加载时的缩放级别。maximum-scale、minimum-scale和user-scalable属性控制用户允许缩放页面的方式。

- Justin

1

你试过这个吗？

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

- Piotr Ciszewski

maximum-scale=1 被认为是有害的。 - Mika Feiler

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- robertc · Accepted Answer

这不是一个新标准，就我所知它一直是这样运作的。如果你将宽度设置为固定像素数，那么将纵向旋转为横向只会改变比例尺寸，因为虚拟像素的数量保持不变。我猜测添加 initial-scale=1 可以阻止缩放，这样在设备旋转时您页面的缩放因子不会改变。如果您最初以横向加载页面，页面会是什么样子呢？

我建议，如果您想要指定 initial-scale=1 时得到的行为，则应该明确指定 initial-scale=1。 HTML5 BoilerPlate 是您应该根据自己的要求进行修改的东西。