[HTML] viewport 元標籤

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">

什麼是Viewport?

桌上型Safari瀏覽器與iOS上Safari瀏覽器對於viewport的定義是有點不同的。

桌上型Safari的viewport Safari on desktop viewport viewport在桌上型的Safari瀏覽器來說,其實指的就是可視區域(visible area)。無論使用者拉大或縮小視窗,viewport指的都是可視區域。
iOS上Safari的viewport

#1網頁放了一張320 x 356 pixels的圖,預設的情況下,viewport width會是980pixels,顯示如下:viewport default width 980 pixels

#2同樣網頁有一張320 x 356 pixels的圖,將viewport width設為320pixels、scale設為1.0,顯示如下(佔滿):
viewport with width set to 320 pixels

#3同樣網頁有一張320 x x356 pixels的圖,將viewport width設為320pixels、scale設為1.5,顯示如下(放大1.5倍):
Viewport with width set to 320 and scale set to 150%

#4同樣網頁有一張320 x 356 pixels的圖,將viewport width設為320pixels、scale設為0.5,顯示如下(縮小0.5倍,並以白色填滿):
Viewport with width set to 320 and scale set to 50%

#5使用者在做任何zoom in或zoom out等操作手勢時,會改變的是viewport的scale,並不會改變viewport的size:如下顯示:
Viewport with arbitrary user scale

viewport在ios Safari瀏覽器上可能會大於或小於可視區域(visible area),而iPhone及iPod touch的可視區域直擺為320 x 356pixels、橫擺為480 x 208pixels。如左圖各種狀況顯示。

 

使用Viewport Meta Tag

<!-- 設定viewport width等於device的寬度 -->
<meta name="viewport" content="width=device-width">
<!-- 設定初始縮放(scale)為1.0 -->
<meta name="viewport" content="initial-scale=1.0">
<!-- 設定初始縮放(scale)為2.3,且關閉使用者的縮放功能 -->
<meta name="viewport" content="initial-scale=2.3, user-scalable=no">

改變Viewport width

如果設計的網頁寬度是590pixels,則左圖在iOS的Safari看起來就會較窄,所以最好將viewport width設為590pixels,就會像右圖一樣看起來符合版面:

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

Webpage is too narrow for default settings

 

也可將viewport width設為device-width

<meta name="viewport" content="width=device-width">

Web application page is too small for default settings

參考資料:
https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

您可在此處留言

搶先留言!

Notify of
avatar
wpDiscuz