spotlight_title
除了上回說到自訂網站的 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 設定
希望對大家有幫助
, , , , , ,

Leah 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
  • 史提夫
  • 下個案子正好需要!!! 感謝拉 ^^
  • 沒想到史提夫竟然有在 follow 我 (羞)

    Leah 於 2012/08/13 16:23 回覆