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

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,要如何測試網站能否在手機上正確運作呢?

Xcode 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 搜尋應該也找得到。

Xcode iPhone X

STEP 2

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

Xcode iPhone X

STEP 3

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

Xcode iPhone X

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

Xcode iPhone X

STEP 4

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

Xcode iPhone X

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

Xcode iPhone X

STEP 5

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

Xcode iPhone X

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

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

Xcode iPhone X

值得一試的三個理由:

  1. 針對 iPhone X 螢幕尺寸大小和顯示範圍進行網站版型測試
  2. 使用 Apple 提供的開發工具 Xcode 內建許多裝置模擬器
  3. 可測試 iPhone、iPad、Apple TV 和 Apple Watch
分享到...