Html HTML5 样板：元视口和宽度=设备宽度

HTML5 Boilerplate: Meta viewport and width=device-width

提问by mhulse

I'm building an adaptive/responsive website.

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

Regarding this recent change to the HTML5BP:

关于最近对 HTML5BP 的更改：

"mobile/iOS css revisions"

“移动/iOS css 修订版”

I've started using:

我已经开始使用：

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

... and I have this in my CSS:

...我的CSS中有这个：

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

When initial-scale=1was included, rotating from vertical to horizontal (on iPad/iPhone) caused the layout to change from 2 columns (for example) to 3 columns (due to meida queries, initial-scale=1and JS fix for viewport scale bug).

当initial-scale=1包含在内时，从垂直旋转到水平（在 iPad/iPhone 上）会导致布局从 2 列（例如）更改为 3 列（由于 meida 查询，initial-scale=1并且JS 修复了视口比例错误）。

To summarize, when in landscape mode, this zooms the page:

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

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

... and this does not:

... 而这不会：

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

Note:You can see this zooming effect in action when viewing the HTML5BP websiteon an iPad/iPhone.

注意：在 iPad/iPhone 上查看HTML5BP 网站时，您可以看到这种缩放效果。

My questions:

我的问题：

1. Is this becoming the new standard (i.e. zoom when in landscape mode)?
2. I'm having a heck of a time explaining this change to my co-workers and bosses... They're used to seeing a different layout in horizontal mode; now that the page zooms and the layout stays the same (except it's larger). Any tips on how to explain this to the ignorant masses (of which, I might be included)?

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

---

---

@robertc: Thanks! That's very helpful.

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

I actually like nothaving the initial-scale=1; it's my co-workers who are used to seeing the layout change rather than zoom. I'm sure I'll be forcedto add initial-scale=1just to please everyone (because notzooming, and seeing the layout change, is what they're used to seeing).

其实我喜欢不具有initial-scale=1; 我的同事习惯于看到布局变化而不是缩放。我敢肯定我会被迫添加initial-scale=1只是为了取悦所有人（因为不缩放，看到布局变化，这是他们习惯看到的）。

I just noticed the HTML5BP index.html on github, and the website, was using <meta name="viewport" content="width=device-width">; to me, that's good enough reason to ditch initial-scale=1, but I get raised eyebrows when I try to explain these thingsto the "non-geeks". :D

我刚刚注意到github和网站上的 HTML5BP index.html正在使用<meta name="viewport" content="width=device-width">；对我来说，这是放弃的充分理由initial-scale=1，但是当我试图向“非极客”解释这些事情时，我会皱眉。:D

采纳答案by robertc

It's not a new standard, it's how it's always worked AFAIK. If you set the width to a fixed number of pixels, then rotating portrait to landscape just changes the scale, because the number of virtual pixels remains constant. I'm guessing that adding initial-scale=1is blocking the scaling as you switch between - that is the scaling factor of your page doesn't change as the device is rotated. What does the page look like if you load it initially in landscape instead of portrait?

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

I would suggest that if you want the behaviour you get when you specify initial-scale=1, then specify initial-scale=1. HTML5 BoilerPlate is something you're supposedto modify to suit your own requirements.

我建议，如果您想要指定时获得的行为initial-scale=1，请指定initial-scale=1. HTML5 BoilerPlate 是您应该修改以满足您自己的要求的东西。

回答by trognanders

Apple [somewhat] clearly describes the viewport behavior here.

Apple [有点] 清楚地描述了视口行为here。

Chiefly, device-width and device-height in iOS devices refer to the screen dimensions in portrait mode. If you set the viewport width to device-width, it is the same as setting it to a constant value. Therefore, when the physical width of the screen changes with an aspect change, the browser stretches the constantsize you entered to the width of the screen in landscape mode. This behavior is neither wrong nor right, it just is.

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

Apple suggests width=device-widthfor apps tailored to the platform, so it is certainly the "Apple" way of doing it:

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

If you are designing a web application specifically for iOS, then the recommended size for your webpages is the size of the visible area on iOS. Apple recommends that you set the width to device-width so that the scale is 1.0 in portrait orientation and the viewport is not resized when the user changes to landscape orientation. [ie. The viewport retains portrait device width, but is scaled or stretched for presentation to fit the landscape width]

如果您专门为 iOS 设计 Web 应用程序，那么推荐的网页大小是 iOS 上可见区域的大小。Apple 建议您将宽度设置为 device-width，以便纵向的比例为 1.0，并且当用户更改为横向时不会调整视口的大小。[IE。视口保留纵向设备宽度，但会缩放或拉伸以适合横向宽度]

Personally, I prefer the initial-scale=1.0 with no absolute device-width setting approach, since it makes the viewport always fill the device screen without stretching. Apple considers this valid markup as well:

就个人而言，我更喜欢没有绝对设备宽度设置方法的 initial-scale=1.0，因为它使视口始终填充设备屏幕而不会拉伸。Apple 也认为此有效标记：

Figure 3-14 shows the same webpage when the initial scale is set to 1.0 on iPhone. Safari on iOS infers the width and height to fit the webpage in the visible area. The viewport width is set to device-width in portrait orientation and device-height in landscape orientation.

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

回答by darcher

To add a little update:This is still in draft form, but it's definitely something to look into. Also has a prefixed version for IE 10 support. By using CSS instead of HTML it clears up a lot of the confusion you're speaking on by applying the initial-scale:1;to zoom:1;and giving min/maxoptions for width, height, & zoomwhich furter increases the range of adjustment should it be required.

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

extend-to-zoomto the rescue! (http://dev.w3.org/csswg/css-device-adapt/#lsquoextend-to-zoomrsquo)

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

<meta name="viewport" content="initial-scale=1.0">translates to…

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

where as <meta name="viewport" content="width:device-width,initial-scale=1.0">translates to…

其中，作为<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;
}

Note: width:extend-to-zoom 100%;is equal to width:device-width;

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

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

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

回答by Piotr Ciszewski

did you try this?

你试过这个吗？

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

回答by Justin

I found Mozilla's viewport explanationthe most detailed and helpful. Here's a excerpt:

我发现Mozilla 的视口解释最详细和最有帮助。这是摘录：

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding heightand device-heightvalues, which may be useful for pages with elements that change size or position based on the viewport height.)

The initial-scaleproperty controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalableproperties control how users are allowed to zoom the page in or out

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

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