Html iOS 设备的视口元标记
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7892809/
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
Viewport meta tag for iOS devices
提问by pingu
Does stating
是否说明
<meta name="viewport" content="width=device-width" />
have the same effect as stating
与陈述的效果相同
<meta name="viewport" content="width=768" />
for the ipad?
对于ipad?
回答by andreasbovens
It depends indeed on the orientation of the device: setting a specific pixel value will cause your layout to be scaled up with a factor of 1.333 to fit inside the 1024px device width when in landscape mode.
这确实取决于设备的方向:设置特定的像素值将导致您的布局以 1.333 的系数放大,以在横向模式下适应 1024 像素的设备宽度。
Setting width=device-width
on the other hand will not scale anything up, but change the viewport width, for which you then can craft an optimized layout using media queries. Or that is at least the theory: the iPad somehow interprets width=device-width
as 768px even in landscape mode. In order to get the real device width, you have to add initial-scale=1.
width=device-width
另一方面,设置不会放大任何内容,但会更改视口宽度,然后您可以使用媒体查询制作优化布局。或者这至少是理论:width=device-width
即使在横向模式下,iPad也会以某种方式解释为 768px。为了获得真实的设备宽度,您必须添加initial-scale=1。
Hence, I disagree with James' suggestion. Just go for:
因此,我不同意詹姆斯的建议。去吧:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
and deal with size differences using liquid / responsive layout techniques.
并使用流动/响应式布局技术处理尺寸差异。