如何在 Safari 5 建立 iPhone/iPad (i系列行動產品) 網頁瀏覽環境

現今 Smart Phone 相當盛行，似乎假設你的網站不支援手機瀏覽那就遜掉了。
但是手機瀏覽網頁有什麼困難嗎？手機不是都有內建瀏覽器了嗎？為什麼還要特地針對手機進行網站的設計呢？
原因很簡單，因為手機的螢幕大小有限，輸入裝置也有限（在PC的輸入裝置為鍵盤與滑鼠，在手機常常只有觸控面板可以使用），傳統的網頁介面在手機上顯得難以閱讀與操作。

讓我們把瀏覽器視窗調整為與手機螢幕差不多的解析度（iPhone 3GS 480*320），再來瀏覽行動版與傳統版的 Google 首頁。

發現了嗎？如果使用手機瀏覽傳統版的頁面會發生許多問題，比如上方按鈕重疊、出現橫向捲抽等。
此外，很多網站在使用手機進行瀏覽的狀態下會自動切換到所謂的"行動版"頁面，當然伺服器會回應的 HTML 也是不一樣的。

一樣的網址，那麼伺服器要如何知道使用者的連線設備呢？其實很簡單，這些資訊在存放在瀏覽器對網頁伺服器送出的封包中。

在 HTTP 封包中有個 Header 名為 User-Agent，主要用來傳遞使用者瀏覽設備的資訊。
HTTP User-Agent Header 是使用 Product Tokens 的規則進行定義，規則其實就是{名稱}/{本版}，詳細的撰寫規格可以在 RFC 2616 14.43 User-Agent(http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html)這個章節中找到。

Safari：
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50

iPhone：
User-Agent: Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5

看出個端倪了嗎？沒錯，網頁伺服器就是靠著這些資訊來決定回傳給使用者的動作，如果是行動裝置就會回傳行動裝置適合的網頁，或者將瀏覽器重導(HTTP 302 Redirect)到行動裝置專屬的網站。

我們來試試不同的裝置瀏覽 Google 網站有甚麼樣的結果：

進入主題，當你想開發手持設備的網站時，擁有一支測試設備是天經地義的事(可惜沒有人委託我開發手持設備.......-_-)。
但是實際上使用實機進行開發是有困難的，因為相較於PC你會覺得速度慢畫面小鍵盤難用，通常在開發的時候都會借助 Emulator（模擬器）的幫助來進行測試。
然而在開發到一定程度的功能後，才會將程式執行在實機上進行測試，整體來說這樣的作法在開發上是比較有效率的。

今天的主題是iPhone/iPad，那麼要如何獲得模擬環境呢？
我們都知道 Apple 的產品是使用自家開發的 Safari 瀏覽器，因此我們要借助 Safari 來模擬 iPhone/iPad 訪問網站。

設定非常簡單，只要在將 偏好設定 -> 進階 -> 在選單中顯示"開發人員"選單 打勾，這樣就可以了。

然後在 Safari 中只要按下 F10 -> 選取開發人員選單 -> 使用者代理程式 -> 選取你需要的設備，就這麼簡單。