ILoveAdaptive 線上測試回應式網頁設計在不同裝置呈現效果

現在製作網站、部落格或網路服務時都會考慮到行動裝置用戶，因為智慧型手機已經普及，很多人在工作以外的時間甚至很少使用電腦，讓不同螢幕大小的裝置都能正常瀏覽非常重要。以往會將網站區分為電腦版或手機版，使用不同的版型設計，好處是開發上比較簡單，這幾年流行使用回應式網頁設計（Responsive Web Design，簡稱 RWD），讓網頁在不同裝置上瀏覽時可以對應不同解析度而有適合的閱讀效果。

如果想要測試一個網頁能不能在不同的裝置上正確顯示和閱讀，最簡單的方法就是直接將視窗調整縮小放大，遇到支援 RWD 技術頁面會自動調整為適合的寬度和呈現方式，傳統網頁則出現視窗捲軸，需要左右捲動才能看到超出閱讀區域的內容。

本文要介紹「I Love Adaptive」是一個能協助開發者測試網頁在不同裝置呈現效果的服務，一般來說，要測試網頁在行動裝置（手機、平板電腦）能不能正確顯示時我們會去找實體裝置來實際操作看看，但頂多就是幾台手機或平板電腦，無法有非常全面性的測試。

在瀏覽器上模擬這些裝置顯示大小，就能知道網頁是否照著需要的效果呈現。

這項服務內建一些常見裝置的螢幕尺寸比例，包括各種型號的 iPhone 和 Android 手機，也有平板電腦例如 iPad 或 Galaxy Tab 等等，除了模擬網頁在特定尺寸的顯示效果，使用者可透過滑鼠進行操作，或是自訂尺寸大小、禁止捲動、切換為直式橫向顯示等等，也能即時比較不同裝置或網頁的顯示狀態，對於開發者來說是非常實用的線上工具。

I Love Adaptive
https://iloveadaptive.com/

使用教學

STEP 1

開啟 I Love Adaptive 網站後輸入要在不同裝置測試顯示的網址，點選送出就會看到結果。

STEP 2

I Love Adaptive 將輸入的網址顯示在幾個常見常用的 iPhone 尺寸中，也會標示型號、解析度等相關資訊，雖然只是在瀏覽器裡將顯示範圍縮小到特定大小，如果網站使用自適應網頁技術就會調整到適合行動裝置顯示的樣式。

從上方可勾選或取消要測試的裝置型號，也可一次全選或只選擇較熱門的裝置。

STEP 3

從左側工具列選擇裝置類型：手機、平板電腦和桌上型電腦，亦可選擇不同的作業系統。

STEP 4

切換到平板電腦後也會有一些常見型號、螢幕尺寸大小可以挑選，像是 iPad Mini、iPad、iPad Air 和 iPad Pro，左側「Settings」有些設定選項，包括螢幕方向直式橫式切換、是否顯示 iOS 控制列（浮動、隱藏或固定顯示）、自訂高度和禁止捲動。

在手機上可能只會測試直式顯示效果，如果想測試平板電腦的橫向顯示，可以從左側的設定選項調整顯示方向，選取後就會出現橫式顯示效果。

STEP 5

也可點選上方選項「Custom size」自訂要測試的螢幕解析度尺寸大小。

STEP 6

I Love Adaptive 還有一個很有趣的功能，點選最頂端選單的「Compare Urls」開啟不同裝置或頁面比較功能，使用者可以在這裡加入不同裝置類型，或是讓它們分別開啟不同頁面，就能比較在不同環境下的呈現狀態。