iOS设备的视口元标记 [英] Viewport meta tag for iOS devices

问题描述

是否陈述

 < meta name =viewportcontent =width = device-width/> 
  

的效果与

 < meta name =viewportcontent =width = 768/> 
  

为ipad？

解决它确实取决于设备的方向：设置一个特定的像素值会导致您的布局以1.333的倍数放大，以适应在横向模式下1024像素的设备宽度。另一方面，设置 width = device-width 不会缩放任何东西，但改变视口的宽度，为此您可以使用媒体查询制作优化的布局。或者至少是这样的理论：即使在横向模式下，iPad以某种方式将 width = device-width 解释为768px。为了获得真实的设备宽度，您必须添加initial-scale = 1。因此，我不同意James的建议。只需要：

 < meta name =viewportcontent =width = device-width，initial-scale = 1 ，maximum-scale = 1> 
  

并使用液体/响应式布局技术处理大小差异。

Does stating

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

have the same effect as stating

<meta name="viewport" content="width=768" />

for the ipad?

解决方案

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.

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.

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.

这篇关于iOS设备的视口元标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！