不要被官方的 <meta name="apple-mobile-web-app-capable" content="yes"/> 騙了！

在 iPhone 上面寫 Web，其實官方有一些參考的文件，包括一些 guideline 及密技，不過有些事情我在官方文件找不太到，或是寫得不夠清楚，經過一些 trial-n-error 的經驗後，打算寫篇文章整理一下，這篇主要是講 Navigator 的部份。

用 iPhone 打開一些「行動版網頁」，我們可以觀察到一些細微的差異，比方說「聯合新聞網行動版」及「Google 行動版」：

From Screenshots
From Screenshots

大家應該都會覺得 Google 那一頁的「視野」比較寬闊吧！很明顯就是在上方的 navigation bar 有沒有收起來（有 iPhone 的人可以自己測試，不是我特別去捲動畫面）。其實這個部份很容易，只要在 body onload 時去做一次 window.scrollTo(0, 1); 即可，所以如果你去看 Google 行動版（為 iPhone 強化的版本），可以在它的 source 裡找到

<body onload="setTimeout(scrollTo, 0, 0, 1)">

不過事情沒那麼快樂，你如果自己寫網頁測試，一定會發現它不是那麼聽話，好像在某幾頁會乖乖把 navigator 收起來，有時候又不會，不然就是只收一半之類的，其實原因很簡單－－要讓 navigator 乖乖聽話，頁面內容的高度要高過於一個畫面的高度，也就是 iPhone 直立（portrait）時要大於 480px，你去做 scrollTo 時，iPhone 的 Safari 才會乖乖聽你的話。這時就不要吝嗇地使用 CSS 中的 min-height 屬性吧！

所以問題又來了，iPhone 的使用者不一定時時都是直立式地瀏覽網頁，他可能會把 iPhone 翻轉 90 度，以橫向（landscape）模式來瀏覽網頁，這時的畫面解析度就變成 480×320 而不是 320×480 了，所以我們要用什麼對策呢？所幸當畫面在旋轉時，會觸發 window.onresize 的 event，所以我們可以透過處理該 event 來處理畫面翻轉的問題。

但如果 resize 時，我們不斷地去改 min-height 似乎頗麻煩，許多網站的作法是配合 CSS 雙管齊下，比方說它們的 CSS 寫出這樣的東西：

body[orient="portrait"] > #main {
    min-height: 480px;
}
body[orient="landscape"] > #main {
    min-height: 320px;
}

當然，Safari 不會那麼聰明自動幫你的 body 標籤加上 orient 的屬性，所以這裡就用 JavaScript 來輔助：


var currentWidth = window.innerWidth;
window.addEventListener('resize', function() {
  if (currentWidth != window.innerWidth) {
      currentWidth = window.innerWidth;
      document.body.setAttribute('orient', 
        currentWidth < 480 ? 'portrait' : 'landscape');
      scrollTo(0, 1);
  }
}, false);

當然你也別忘了在 body onload 的時候執行一遍這個 handler 作的事情，因為你同樣也不知道使用者剛進來你的頁面時，是 portrait 還是 landscape。至於 CSS 的部份就看你的頁面怎麼設計，而去調整它的 min-height 數值囉。

這些密技都可以參考 m.flickr.com 或是 x.facebook.com 的 CSS 及 JS 來研究喔 :P

 

歷史上的今天