html viewport meta 說明及淺見

html viewport meta 淺見及說明

web mobile 化已經是一個全球的局面，好像網站如果沒有做個 media query，都會羞的不敢見人。
神奇的地方是很多人都會在html head 處加上 viewport 這個 meta data，為了釐清實際的效用以及屬性，接下來將大略介紹 viewport-meta 說明屬性與應用。

屬性說明

W3C 協會定義 viewport meta 目前還屬於草案，意思就是有可能隨時修改，特別註記一下，此文於西元2012年3月28日撰寫，以下描述如有出入，以W3C 標準為主。
viewport 可以設定的屬性分別如下，

width：可設定數值，或者指定為 device-width
height：可設定數值，或者指定為 device-height
initial-scale：第一次進入頁面的初始比例
minimum-scale：允許縮小最小比例
maximum-scale：允許放大最大比例
user-scalable：允許使用者縮放，1 or 0 (yes or no)

最初執行viewport meta加入如下

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

編譯過程會轉化成如下的語意，

@viewport {
    width: device-width;
    initial-scale: 1.0
}

基本說明

width=device-width
先提一下幾個注意的地方，首先在 viewport 裡面的 width 通常會看到設定為device-width ，主要是為了讓整個頁面寬度與手機可視寬度相同，如此就可以簡單相容於不同機型螢幕大小，如果這邊width 沒有設定的話，就會依照 html css 給予的 width 當作預設值。
因為解析度不同，device-width 有時候不一定是 view width ，所以在類似 iphone 4 高解析度機器上，device-width=320 ，可是實際解析度為 480，這時候就需要利用javascript 針對UA 下去做動態調整。
user-scalable
從屬性名稱來看就是允許開啟、關閉的設定，使用者能否放大、縮小頁面，如果頁面不允許手機使用者縮放，就直接設定為 0，或者 no，反之要啟動縮放功能，給予 1或者是 yes。
接下來將說明幾種常用的方式，以及測試驗證提供給大家參考。
基本寬度（並不是指 html body width），

<meta name="viewport" content="width=300px">

基本高度

<meta name="viewport" content="height=300px">

禁止使用者放大縮小

<meta name="viewport" content="user-scalable=0">
<meta name="viewport" content="user-scalable=no">

基本款式，

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

初始檢視 n 放大，(這裡使用 x 10.0)

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

限制最大放大比例

<meta name="viewport" content="width=device-width, maximum-scale=15.0">

限制最小縮小比例（數值必須為正值）

<meta name="viewport" content="width=device-width, minimum-scale=0.1">

進階應用

上面已經說明了幾種常用的基本應用，接著要說明一個概念，假設設定數值

放大議題

initial-scale=10.0
maximum-scale=15.0

可以很簡單得知，一開始就是 x 10.0，最大可放大到 x 15.0，如果變化一下

initial-scale=15.0
maximum-scale=10.0

可以發現，初始的放大比例會變成 x 15.0，最大放大比例 還是 x 15.0，推論出來結果就是

*初始、最大值，以最大值為主*。

縮小議題

接著討論縮小，一開始設定數值，

initial-scale=5.0
minimum-scale=1.0

結果跟我們預估相同，初始值 x 5.0，最小縮小值 x 1.0，如果將數值反過來之後會發現，

initial-scale=1.0
minimum-scale=5.0

結果居然是，初始值 x 1.0，最小縮小值 x 1.0 ，最後推論結果為

初始、最小值，以最小為主。

看到這邊相信大家對於數值設定有個認知，接著做個最後小測試，

initial-scale=1.0
minimum-scale=5.0
maximum-scale=0.1

猜猜看，結果為何？？？
答案，init x 1.0， max x 1.0， min x 1.0，無法放大縮小。

viewport meta 其他參考

另外提供給大家幾個viewport 的使用方式，
如果在手機端我們希望網頁呈現固定，不希望使用者隨意縮放，直接設定如下

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

如果希望在不同 device 使用不同縮放大小，就必須使用 javascript，偵測UA(User agent)，動態設定viewport，片段程式如下，

viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;');

後記

在css media query 中， viewport meta是一個初始化很重要的開始，經過這次開發的過程中慢慢分析，調整才瞭解到裡面一些架構狀況，另外 css @viewport 屬性還有很多種類，詳細列表可以參考 W3C viewport property index table。
因為目前移動裝置螢幕尺寸不同，種類需求也都不同，最理想的狀況當然是一種 web 全部滿足，不過依照目前的規格分歧來看，還有一段很長的路要走。

參考資料

• http://hsinyu00.wordpress.com/2011/04/05/mobile-web-viewport/
• http://fairyfish.net/m/viewport-meta-tag/
• http://dev.w3.org/csswg/css-device-adapt
• http://stackoverflow.com/questions/3588628/can-i-change-the-viewport-meta-tag-in-mobile-safari-on-the-fly