移动布局控制
常见的移动优化网站使用 <meta name="viewport">
标记,如下所示:
<meta name="viewport" content="width=device-width, initial-scale=1">
viewport
元素为浏览器提供了有关如何根据你使用的设备控制页面尺寸和缩放的说明。
在上面的示例中,content="width=device-width
表示浏览器将在其自己的屏幕宽度处呈现页面的宽度。因此,如果该屏幕是 480px wide
,则浏览器窗口将为 480px wide
。initial-scale=1
描述了初始缩放(在这种情况下为 1,意味着它不会缩放)。
以下是此标记支持的属性:
笔记:
1 width
属性可以用像素 (width=600
) 指定,也可以用设备宽度 (width=device-width
)指定,它代表设备屏幕的物理宽度。
2 同样,height
属性可以在 pixels
(height=600
)中指定,也可以由 device-height
(height=device-height
)指定,它代表设备屏幕的物理高度。