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

最新 09-28

兩周前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/

相關資源：http://mx108.com

使用教學

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度。