Leah's Life

除了上回說到自訂網站的 iPhone、iPad 及 iPod touch 桌面捷徑圖示之外，還有一些基本的 meta 設定

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，其實就是不讓使用者縮放，以維持頁面的設計，行動裝置專用的網頁常有必要這樣做。)

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)

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


其他設定

將網頁收藏為書籤並加到主畫面時，可以令最下的選單消失，令網頁變為全屏幕，在 head 加入以下設定:
<meta name="apple-mobile-web-app-capable" content="yes">

將網頁收藏為書籤並加到主畫面時，可以將最上的狀態列設定為其他顏色(發覺只能設定為黑色)，在 head 加入以下設定:
<meta name="apple-mobile-web-app-status-bar-style" content="black">


以上三行是在做 Mobile Web 時大部分會需要加入的三行 meta 設定
希望對大家有幫助