移动布局控制

常见的移动优化网站使用 <meta name="viewport"> 标记,如下所示:

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

viewport 元素为浏览器提供了有关如何根据你使用的设备控制页面尺寸和缩放的说明。

在上面的示例中,content="width=device-width 表示浏览器将在其自己的屏幕宽度处呈现页面的宽度。因此,如果该屏幕是 480px wide,则浏览器窗口将为 480px wideinitial-scale=1 描述了初始缩放(在这种情况下为 1,意味着它不会缩放)。

以下是此标记支持的属性:

笔记:

1 width 属性可以用像素width=600) 指定,也可以用设备宽度width=device-width)指定,它代表设备屏幕的物理宽度。

2 同样,height 属性可以在 pixelsheight=600)中指定,也可以由 device-heightheight=device-height)指定,它代表设备屏幕的物理高度。