html5中的Viewport的标签解释

最新推荐文章于 2023-09-20 21:59:58 发布

原创最新推荐文章于 2023-09-20 21:59:58 发布 · 107 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#移动开发

html5 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一段用于控制移动设备浏览器视口的HTML元标签代码，该代码能够确保页面在iPhone和iPad上以设备的实际宽度展示，并禁止用户进行缩放操作。同时也提到了这段代码在Android WebView中的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面这句代码在iPhone的浏览器中将以原始大小显示，并不允许缩放。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

其中：
width - viewport的宽度
height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

注：此标签在iphone4和ipad均可以到缩放作用，但是在Android的WebView却不支持

<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes" />

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />