Mobile Web 前端技術筆記(一): Viewport的設定

Viewport的設定

《基礎》

viewport的作用是告訴瀏覽器,目前裝置有多寬(或多高),以便在縮放時有個基準。尤其當設定頁面寬度需自動調整時,如寬度100%或螢幕由垂直轉為水平,viewport大小是一個根據。

《用法》

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

(這個例子中的maximum-scale也設為1,其實就是不讓使用者縮放,以維持頁面的設計,行動裝置專用的網頁常有必要這樣做。)

《屬性和值》

根據W3C草案,在meta tag中viewport有以下屬性可設定

  • width:[數字] 或 device-width
  • height:[數字] 或 device-height
  • initial-scale:最小0.25,最大5
  • minimum-scale:最小0.25,最大5
  • maximum-scale:最小0.25,最大5
  • user-scalable:1 或 0 (yes 或 no)

雖然是W3C文件,但還在草案(Editor’s Draft)階段,尚未標準化,iOS上的Safari最先實作這些屬性,所以比較完整,表現也比較穩定;其他瀏覽器不見得能解譯,但新版的Opera, Android, Fennec(Mobile Firefox)應該是可以實現其中幾項屬性的。但Opera Moblie 9.5中minimum-scale/maximum-scale、user-scalable的功能是不作用,因為Opera當時認為自家的Zoom功能是必要的。

width通常設為device-width,用意是適應各家裝置的大小,這樣寫CSS時就能放心的把版面寬度設為100%(雖然還有一個box model的問題,容後再述)。

user-scalable的實際行為就等於zoom,zoom=1可以配合行動版專用網頁的設定,剛剛好填滿畫面,不過桌機版網頁超出畫面是必然的。

mobile_mediaqueries

《備註》

螢幕解析度不一定等於device-width,
Nexus One 是螢幕解析度(800)不等於device-width(320)的典型例子,
iPhone 4 亦同 – 螢幕解析度(960),但device-width回報為(320)。
新出的手機傾向採用高畫素的面板,如果照實體螢幕解析度作為device-width,有可能進入大部分網站時都看到縮小的畫面,這是使用方便上的一個考量。

《資料來源》

  1. W3C文件 http://dev.w3.org/csswg/css-device-adapt/
  2. device-width的解說
    http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
  3. Pou’s IT Life
    http://www.dotblogs.com.tw/pou/archive/2010/09/26/17890.aspx
廣告

10 thoughts on “Mobile Web 前端技術筆記(一): Viewport的設定

  1. 引用通告: about viewport, when u do mobile | code@butterflybone

  2. 引用通告: 可以在觸控裝置上長壓的網頁按鈕 | Heresy's Space

  3. 引用通告: jQuery mobile 在頁面的大小控制:viewport | jsnwork 工作日誌

  4. 您好~請教您,關於iPhone解析度與與device-width不同的問題,是否有辦法讓iPhone照實體螢幕解析度作為device-width?

  5. 引用通告: LULU002 | Elaine on the way

  6. 引用通告: 簡單聊響應式網站設計(RWD) | 藍天小築

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s