為 iPhone 寫網頁之注意縮放(scale)

我絕對不是針對 m.udn.com 的啊~

今天 Jeremy 大人突然叫我用 iPhone 來看 m.udn.com,雖然我並沒有 iPhone,但我還有 iPhone Simulator(iPhone SDK附的)可以使用,所以開起來是這個樣子:

看起來很正常,沒什麼異狀啊(除了我上次提到的問題之外),而 Jeremy 大人又叫我翻轉一下 iPhone,於是就看到這個神妙的畫面:

咦?為什麼翻轉畫面就「看起來」壞掉了咧?經過我到 Apple 官方的 guidelines 去翻了一下之後,終於找到原因了。

我們都知道 iPhone 的螢幕解析度是 320x480,也就是說你直立你的 iPhone 時,畫面的寬度是 320px。如果你的網頁沒有做任何調整的話,iPhone 的瀏覽器會認定你的 viewport 是 320px,此時你把螢幕翻轉後,雖然 iPhone 長邊是 480px 寬,但 viewport 還是算 320px 寬,於是 iPhone 的瀏覽器就會做一個 scale 的動作,簡單的數學算一下就是 1.5 倍(480/320),這時候你就會發現所有的物件都被 scale 成 1.5 倍,原本設定是 13px 顯示的字體,此時「看起來」好像就是 19.5px 的大小。

那,為什麼 m.udn.com 在這個狀況下會爛掉呢?我們可以去分析一下它的 HTML/CSS,發現它最外層用了一個

做排版,你猜到了嗎?因為 scale 的關係,現在這個
就變成
,所以當然會超出螢幕的寬度,讓使用者得到了一個不是很理想的閱讀版面。如果 m.udn.com 的 table 是寫成
的話,在這裡例子就沒問題。

不過你可以再實驗一下,如果就以橫立的狀態去讀取下一頁,viewport 就會被重新定義,所以 m.udn.com 又正常了:

既然換了一頁 viewport 就被重新定義(注意: 重新讀取不會喔),如果只是把寬度寫死顯然不會解決這個問題。

所以在 Apple 官方的 guidelines 有提到,你可以加入一個 meta tag,像是這樣:

就是告訴 iPhone 瀏覽器該怎麼定義 viewport,然後你可以把像是 maximum-scale 這類屬性寫死成 1.0,讓它不會自動去做 scale 的動作。(google.com/m, x.facebook.com, m.flickr.com 以及 photo.xuite.net/_m 都有加這一個 meta tag)

其實 iPhone 瀏覽器會這樣自動 scale 也是蠻方便的特色,尤其現在很多網站都還沒有為 iPhone 來最佳化他們的網站,所以碰上這個問題就是難免的囉(故事告訴我們:用 % 來計算單位蠻可怕的 XD)。如果您正打算為 iPhone 寫網頁,那就千萬要好好讀官方的 guidelines 喔(因為要加入會員才能看,所以我就不提供連結了)

  • 用iPhone觀賞氣象局的PDA版網站更加神妙啊 (http://www.cwb.gov.tw/pda/)

  • 這個縮放也太威了吧 XD

  • 縮放意義不大,不過對於老年人還是有用的。

  • Jeremy

    速報速報,今日看 udn 時貌似已修複吶,我怎麼轉都沒法再重現超大字了 XD