Mac 站長必學！使用 Xcode 模擬器測試網站在 iPhone X 顯示效果教學

兩週前 Apple 在 iPhone 誕生十週年之際宣布推出「iPhone X」（羅馬數字中的 10），吸引全球目光，堪稱有史以來最高階 iPhone 手機，更將沿用十年的 Home 鍵拿掉，讓使用者享受全螢幕 OLED 顯示器，宣示意味重大。雖然價格已來到一個非常神奇的區間（想想一支手機可以賣到三萬多甚至超過四萬元真是不可思議），身邊卻有不少朋友表示絕對要買 iPhone X，或許是它的各種功能設計都是走在時代前端，令人難以抗拒吧！

可想而知 iPhone X 一定會賣得非常好，但同時推出的 iPhone 8 和 iPhone 8 Plus 也不遑多讓，對網站開發者來說，可以趁著 iPhone X 上市前開始著手進行測試，例如大部分人會關心的網站、部落格能不能在全新螢幕大小中正確瀏覽，這可能是個相當重要且值得深入探討的問題。

不過你如果和我一樣不打算購買 iPhone X，要如何測試網站能否在手機上正確運作呢？

Apple 開發者工具套件 Xcode 內建的「模擬器」（Simulator）在 9.0 更新後加入對 iPhone X 及 iPhone 8、iPhone 8 Plus 支援，這也表示你可以在 Mac 使用模擬器來測試網站、部落格是不是能夠在新的 iPhone 正常顯示，非常好用。

如果你剛好也使用 macOS，趕快照著以下教學來下載、更新 Xcode 吧！除了可測試最新 iPhone X 外，也有各系列的 iPhone、iPad、Apple TV 和 Apple Watch 環境能夠模擬，對於開發來說是個很實用的工具，至少你不需要實際擁有這些硬體設備，拿來看看網站，調整一下行動版頁面或 RWD 都很合適。

網站名稱：Xcode – Apple Developer
網站鏈結：https://developer.apple.com/xcode/

使用教學

STEP 1

你可以直接打開 Xcode 網站，點擊右上角的「Download」登入開發者帳戶，就能透過下載頁面取得鏈結，或者從 Mac 的 App Store 搜尋應該也找得到。

STEP 2

第一次使用時需要一些時間安裝。

STEP 3

開啟 Xcode 開發工具後，從上方選單點擊「Xcode」，找到「Open Developer Tool」選擇其中的模擬器「Simulator」選項。

我目前測試預設開啟的模擬器會是最新的 iPhone X，假如你的不是，或是想切換成其他裝置，可以點擊上方選單「Hardware」，找到「Device」就能選擇其他裝置，目前 Xcode 支援 iOS、tvOS 和 watchOS，包括智慧型手機、平板電腦、電視和手錶。

STEP 4

等待 iPhone 開機一下，啟動後就會看到如下畫面，直接使用滑鼠來操作吧！

回到最前面的問題，要如何測試網站在 iPhone X 顯示是否正常呢？點擊 iPhone 的 Safari 瀏覽器，輸入要測試的網站網址，載入後就是網頁在 iPhone X 顯示的狀況囉！雖然螢幕稍微大了點但如果你的網站使用「自適應網頁設計」（Responsive web design，簡稱 RWD），看起來應該是不會出現錯誤，你也可以測試看看其他的 iPhone 大小。

STEP 5

在直立模式測試後，從選單上的「Hardware」選擇「Rotate Right」將裝置往右翻 90 度。

如此一來就能測試網頁在 iPhone 橫向時顯示的效果。

畢竟橫向時寬度較大，可能瀏覽起來效果完全不同，但礙於行動裝置的瀏覽面積有限，還是必須要設想到有些使用者可能習慣橫向閱讀，花點時間稍微檢查、調整一下，以免瀏覽上出現問題。