為 iPhone 寫網頁之隱藏 Navigator

不要被官方的 騙了!

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

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

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

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

所以問題又來了,iPhone 的使用者不一定時時都是直立式地瀏覽網頁,他可能會把 iPhone 翻轉 90 度,以橫向(landscape)模式來瀏覽網頁,這時的畫面解析度就變成 480x320 而不是 320x480 了,所以我們要用什麼對策呢?所幸當畫面在旋轉時,會觸發 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 來研究喔 😛

  • HeChien

    apple-mobile-web-app-capable這個meta的用處似乎在用Safari開的情況下是無用的
    要按下底下的「+」,儲存成主畫面連結,這樣開才會有用