移動佈局控制
常見的移動優化網站使用 <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
)指定,它代表裝置螢幕的物理高度。