★ April 2nd, 2010 為 iPad 調整網站（Apple 技術文件編號 2262）
iPad 即將在美國正式上市，大家的焦點都集中在 iPad app 上。由於 App 開發者們都沒有拿到真的 iPad，所以他們只能用利用 iPhone SDK 提供的模擬器，或是把紙板剪成 iPad 大小，盡量模擬出使用時的感覺。
那麼網站呢？網站開發者如果想讓 iPad 使用者有完整的使用經驗（就是說你的網站在 iPad 上沒有爛掉啦），應該要做些什麼事呢？
Apple 的技術文件有提到幾項要點，只要檢查一下，就可以讓你的網站在 iPad 上正常使用：
- 用 iPad Simulator 測試網站。
- 使用 W3C 標準，不要用 plug-ins。
- 檢查 Viewport 標籤。
- 改寫 CSS 裡有用到 fixed-position 的部份。
- 為觸控螢幕準備網站。
- 不要使用 contenteditable，改用 textarea。
第二點的 plug-in 其實指的就是 Flash。
第三點的 Viewport 是指 iPad 預設的顯示比例，如果調整的好，使用者就不需頻繁的放大縮小來看你的網站。
第一、四、五、六點就是要你注意網站上有沒有一些功能是無法單純用手指觸控操作？是否有某些功能是要滑鼠 hover 在上面才會啟動？還是用到 iPad 不支援的 fixed-position？
基本上，只要你的網站不是用 Flash，幾乎什麼都不必做就可以在 iPad 上完整呈現。
調整 JIWO STUDIO
我的 blog 不需要調整也可以正常使用，但我仍然為 iPad 稍微調整了 CSS 與 Viewport 標籤，讓它在 iPad 上有更好的呈現。
為何要調整
調整前，我的版面有兩個問題：
- 版面和周圍背景間有深褐色背景，這些空隙佔去了 iPad 的寶貴空間。
- header 和 content 間出現了縫隙，這是 MobileSafari 在縮放時的計算問題，不是我的錯，但我仍然不想看到這個縫隙。
此外，iPad 直立模式下，內文字體顯得太小，使用者必須自己放大。
調整 CSS
我做了兩件事，首先我給 iPad 一個它專用的 CSS：
<link rel="stylesheet" type="text/css" href="..../ipad.css"
media="only screen and (max-device-width: 1024px)" />
然後在 CSS 裡把 header 往上拉高、調整 header 和 content 的背景位置，最後，稍微加大字型。
這時候我的 blog 是長這樣：
你可以看到版面整個被往上拉，原來在 header 和 content 間的縫隙消失，字體也加大到在直立模式下也可以閱讀的程度。
加入 viewport 標籤
接下來我在 <head> 裡加入了 viewport 標籤：
<meta name="viewport" content="width= 942" />
設定寬度為 942px 後，剛好可以讓左右兩邊的褐色背景消失，而且會讓整個網頁的放大倍率再稍稍提高，變成這樣：
看起來很棒～！（自我感覺良好）
不知為何，看到在 iPad 上左右不留空隙的網站會特別爽，可能是因為這樣的形式在視覺上讓網站和 iPad 融合在一起吧。
輕鬆又有效的 iPad 最佳化
單純把 header 拉高、再設定 viewport 標籤，就可以讓你的網站在 iPad 上有更好的呈現，如果你又有調整字體，那麼使用者就連放大或翻轉 iPad 都不必做了，我想這兩招可以套用到很多的 blog 上，有空不妨試試。