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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 11:15:14  来源:igfitidea点击:

Viewport meta tag for iOS devices

ipadhtmlviewportmeta-tags

提问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-widthon 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-widthas 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.

并使用流动/响应式布局技术处理尺寸差异。