HTML | 屏幕宽度属性

简介

屏幕宽度属性是HTML5中新增的一项属性，可用于指定文档的显示区域，即文档视口的大小。它可以以像素或百分比形式指定文档在屏幕上的宽度。

语法

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

属性值

• device-width：设备屏幕宽度
• device-height：设备屏幕高度
• width：文档视口的宽度，可以为固定像素值、百分比、特殊值“device-width”等
• height：文档视口的高度，可以为固定像素值、百分比等
• initial-scale：初始缩放比例
• minimum-scale：最小缩放比例
• maximum-scale：最大缩放比例
• user-scalable：是否允许用户缩放

示例

以最常见的使用方式来看示例，如下：

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

上述代码会使文档在手机屏幕上以实际设备宽度为视口宽度进行显示，并且不进行缩放。这样无需用户手动进行缩放，即可看到一个适合屏幕宽度的页面。

当然，我们也可以使用固定像素值来指定宽度：

<meta name="viewport" content="width=1200">

上述代码会使文档视口的宽度为1200像素，不随屏幕大小变化而变化。这种情况下可能会使手机用户需要横向滚动才能看到全部内容，因此除非特殊需求，不建议这种方式。

扩展阅读

• 浅谈viewport在移动端的应用