Site icon Soul & Shell Blog

如何在 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 -> 選取開發人員選單 -> 使用者代理程式 -> 選取你需要的設備,就這麼簡單。

Exit mobile version