Html <meta name="viewport" content="width=device-width"> 在 iOS 横向模式下有什么作用?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/13997274/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does <meta name="viewport" content="width=device-width"> do in landscape mode on iOS?
提问by Brandon Lebedev
I'm trying to understand the scaling attributes on iOS.
我试图了解 iOS 上的缩放属性。
According to Apple's Developer Docs, declaring
<meta name="viewport" content="width=device-width">
will tell iOS to scale a webpage to a 1:1 pixel ratio when the page loads (in portrait mode).According to a presentationby the folks at HTML5Boilerplate (see slide 13),
device-width
will always correspond to the smaller measure of an iOS device's screen, regardless of the device's orientation.Therefore, if you load a page in iOS with the
<meta name="viewport" content="width=device-width">
declaration while holding the device in a landscape orientation, iOS will set the viewport's width according to what appears to be the screen's height, resulting in a 1.5:1 (iPhone 4s) or 2:1 (iPhone 5) pixel ratio.
根据Apple 的 Developer Docs,声明
<meta name="viewport" content="width=device-width">
将告诉 iOS 在页面加载时(在纵向模式下)将网页缩放到 1:1 的像素比。根据人们在 HTML5Boilerplate上的演示(参见幻灯片 13)
device-width
,无论设备的方向如何,都将始终对应于 iOS 设备屏幕的较小尺寸。因此,如果您在 iOS 中加载带有
<meta name="viewport" content="width=device-width">
声明的页面,同时将设备保持为横向,iOS 将根据屏幕的高度设置视口的宽度,从而产生 1.5:1 (iPhone 4s) 或 2: 1 (iPhone 5) 像素比例。
Am I correct, or am I misunderstanding the definition of "width" and "device-width" as Apple uses them?
我是对的,还是我误解了 Apple 使用“宽度”和“设备宽度”的定义?
Furthermore, when an iOS device rotates, what does the viewport maintain? It's width, or it's scale? Does it depend on the meta settings?
此外,当 iOS 设备旋转时,视口保持什么?是宽度还是比例?它取决于元设置吗?
回答by Brandon Lebedev
According to Apple's Developer Docs:
根据 Apple 的开发者文档:
"Similarly, if you specify only the viewport width, the height and initial scale are inferred. Notice that... the landscape orientation maintains a width equal to device-width, which changes the initial scale and has the effect of zooming in when the user changes to landscape orientation."
“同理,如果只指定视口宽度,则推断出高度和初始比例。注意……横向保持宽度等于设备宽度,这会改变初始比例并具有放大时的效果用户更改为横向。”
The article states that iOS keeps the same viewport setting regardless of orientation or rotating the device.
文章指出,无论设备的方向或旋转如何,iOS 都会保持相同的视口设置。
See here, under "How Safari Infers the Width, Height, and Initial Scale".
请参阅此处,在“Safari 如何推断宽度、高度和初始比例”下。