HTML 用于识别移动设备的Viewport元标记

Posted 2021-05-24

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

iOS 设备的视口元标记

【中文标题】iOS 设备的视口元标记

【英文标题】：Viewport meta tag for iOS devices

【发布时间】：2011-12-15 02:55:34

【问题描述】：

说明

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

与陈述作用相同

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

ipad？

【参考方案1】：

这确实取决于设备的方向：设置特定的像素值将导致您的布局放大 1.333 倍，以适应在横向模式下 1024px 设备宽度。

另一方面，设置width=device-width 不会放大任何东西，但会更改视口宽度，然后您可以使用媒体查询来制作优化的布局。或者至少理论上是这样的：即使在横向模式下，iPad 也会以某种方式将width=device-width 解释为 768px。为了获得真实的设备宽度，您必须添加 initial-scale=1。

因此，我不同意 James 的建议。去吧：

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

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

【讨论】：

感谢 Andreas 的回复，我的印象是 device-width 返回了 ipad 设备的宽度（768px），无论是纵向还是横向

迟到的回复。你是对的。需要 才能获得 iPad 上的真实设备宽度。

这对我不起作用，出于某种原因，在横向方向中，宽度设置为大于设备横向宽度的某个值，没有充分的理由。

更新：通过设置maximum-scale=1

修复