移動佈局控制

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