如果想要測(cè)試一個(gè)網(wǎng)頁(yè)能不能在不同的設(shè)備上正確顯示和閱讀，最簡(jiǎn)單的方法就是直接將視窗調(diào)整縮小放大，遇到支持 RWD 技術(shù)頁(yè)面會(huì)自動(dòng)調(diào)整為適合的寬度和呈現(xiàn)方式，傳統(tǒng)網(wǎng)頁(yè)則需要左右滑動(dòng)才能看到超出閱讀區(qū)域的內(nèi)容。

本文要介紹「I Love Adaptive」是一個(gè)能協(xié)助開(kāi)發(fā)者測(cè)試網(wǎng)頁(yè)在不同設(shè)備上呈現(xiàn)效果的服務(wù)，一般來(lái)說(shuō)，要測(cè)試網(wǎng)頁(yè)在移動(dòng)設(shè)備（手機(jī)、平板電腦）能不能正確顯示時(shí)我們會(huì)去找實(shí)體設(shè)備來(lái)實(shí)際操作看看，但頂多就是幾臺(tái)手機(jī)或平板電腦，無(wú)法有非常全面性的測(cè)試。

在瀏覽器上模擬這些設(shè)備顯示大小，就能知道網(wǎng)頁(yè)是否照著需要的效果呈現(xiàn)。

這項(xiàng)服務(wù)內(nèi)建一些常見(jiàn)設(shè)備屏幕尺寸比例，包括各種型號(hào)的 iPhone 和 Android 手機(jī)，也有平板電腦例如 iPad 或 Galaxy Tab 等等，除了模擬網(wǎng)頁(yè)在特定尺寸的顯示效果，使用者可通過(guò)滑動(dòng)鼠標(biāo)進(jìn)行操作，或是自訂尺寸大小、禁止拖拽、切換為直式橫向顯示等等，也能即時(shí)比較不同設(shè)備或網(wǎng)頁(yè)的顯示狀態(tài)，對(duì)于開(kāi)發(fā)者來(lái)說(shuō)是非常實(shí)用的線上工具。

I Love Adaptive

網(wǎng)站鏈接：http://iloveadaptive.com/

使用教學(xué)

開(kāi)啟 I Love Adaptive 網(wǎng)站后輸入要在不同設(shè)備測(cè)試顯示的網(wǎng)址，點(diǎn)擊回車就會(huì)看到結(jié)果。

I Love Adaptive 將輸入的網(wǎng)址顯示在幾個(gè)常見(jiàn)常用的 iPhone 尺寸中，也會(huì)標(biāo)示型號(hào)、解析度等相關(guān)資訊，雖然只是在瀏覽器里將顯示范圍縮小到特定大小，如果網(wǎng)站使用自適應(yīng)網(wǎng)頁(yè)技術(shù)就會(huì)調(diào)整到適合移動(dòng)設(shè)備顯示的樣式。

從上方可勾選或取消要測(cè)試的設(shè)備型號(hào)，也可一次全選或只選擇較熱門的設(shè)備。

從左側(cè)工具列選擇設(shè)備類型：手機(jī)、平板電腦和臺(tái)式電腦，亦可選擇不同的操作系統(tǒng)。

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

在手機(jī)上可能只會(huì)測(cè)試直式顯示效果，如果想測(cè)試平板電腦的橫向顯示，可以從左側(cè)的設(shè)定選項(xiàng)調(diào)整顯示方向，選取后就會(huì)出現(xiàn)橫式顯示效果。

也可點(diǎn)擊上方選項(xiàng)「Custom size」自訂要測(cè)試的屏幕解析度尺寸大小。

I Love Adaptive 還有一個(gè)很有趣的功能，點(diǎn)選最頂端選項(xiàng)的「Compare Urls」開(kāi)啟不同設(shè)備或頁(yè)面比較功能，使用者可以在這里加入不同設(shè)備類型，或是讓它們分別開(kāi)啟不同頁(yè)面，就能比較在不同環(huán)境下的呈現(xiàn)狀態(tài)。

值得一試的三個(gè)理由：

• 協(xié)助開(kāi)發(fā)者測(cè)試網(wǎng)頁(yè)在移動(dòng)設(shè)備、平板電腦的呈現(xiàn)效果
• 內(nèi)建一些常見(jiàn)設(shè)備的屏幕尺寸比例，也可自訂大小或橫向顯示
• 通過(guò)比較工具加入不同設(shè)備或開(kāi)啟不同網(wǎng)頁(yè)，比較它們之間產(chǎn)生的差異