想做響應式測試？試試這個超好用的在線測試神器！

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

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

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

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

I Love Adaptive

網站鏈接：http://iloveadaptive.com/

使用教學

開啟 I Love Adaptive 網站后輸入要在不同設備測試顯示的網址，點擊回車就會看到結果。

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

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

從左側工具列選擇設備類型：手機、平板電腦和臺式電腦，亦可選擇不同的操作系統。

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

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

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

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

值得一試的三個理由：

• 協助開發者測試網頁在移動設備、平板電腦的呈現效果
• 內建一些常見設備的屏幕尺寸比例，也可自訂大小或橫向顯示
• 通過比較工具加入不同設備或開啟不同網頁，比較它們之間產生的差異