在發(fā)布之前確保您的設(shè)計(jì)為每種類型的用戶和設(shè)備做好準(zhǔn)備，這一點(diǎn)從未如此重要。雖然在每臺(tái)設(shè)備上進(jìn)行物理測(cè)試可能很困難，但有一些工具和應(yīng)用程序可以幫助您優(yōu)化各種響應(yīng)方案。

使用免費(fèi)和高級(jí)工具選項(xiàng)，沒有理由不在部署之前測(cè)試響應(yīng)式設(shè)計(jì)。只需將該網(wǎng)頁(yè)進(jìn)行必要的設(shè)計(jì)調(diào)整！今天，我們將為您提供一系列用于測(cè)試響應(yīng)式設(shè)計(jì)的工具。

1.谷歌移動(dòng)友好度測(cè)試工具

谷歌移動(dòng)測(cè)試是那些以某種方式被忽視的首選工具之一。您需要將自己的網(wǎng)站設(shè)計(jì)傳遞給Google的標(biāo)準(zhǔn)，以幫助提高搜索的可見性; 就這么簡(jiǎn)單。

使用非常簡(jiǎn)單，只需輸入網(wǎng)址即可查看您的網(wǎng)頁(yè)在移動(dòng)設(shè)備上的得分情況。此工具的最佳部分是它可以確定您的網(wǎng)站可能在哪些網(wǎng)站放慢速度或在移動(dòng)設(shè)備上無(wú)法正常呈現(xiàn)，以便您可以進(jìn)行修復(fù)。

費(fèi)用：免費(fèi)

2.Responsiator

 

Responsiator允許您在許多不同的設(shè)備環(huán)境中查看您的網(wǎng)站設(shè)計(jì)。（這是復(fù)制設(shè)備的好方法，而不需要在某個(gè)抽屜中放置一堆電話。）

關(guān)于這個(gè)網(wǎng)站最好的部分是快速添加新設(shè)備，每個(gè)設(shè)備實(shí)際上都允許您滾動(dòng)，以便您看到整個(gè)頁(yè)面，而不僅僅是滾動(dòng)上方顯示的內(nèi)容。設(shè)備也以縱向和橫向視圖提供。此外，每個(gè)設(shè)備預(yù)覽都會(huì)貼上標(biāo)簽，以便您準(zhǔn)確了解所查看的內(nèi)容以及潛在問題。

費(fèi)用：免費(fèi)，但有廣告（刪除捐贈(zèng)廣告）

3.響應(yīng)式設(shè)計(jì)檢查器

 

自適應(yīng)設(shè)計(jì)檢查器將您的網(wǎng)站放入一個(gè)窗口，您可以在其中手動(dòng)調(diào)整大小 - 非常適合檢查斷點(diǎn) - 并查看不同的設(shè)備方向。

這個(gè)工具擅長(zhǎng)的地方在于它顯示了桌面尺寸以及移動(dòng)設(shè)備和平板電腦設(shè)備。（其他一些工具確實(shí)強(qiáng)調(diào)移動(dòng)而不是更大的屏幕。）

它的好處是你可以在不改變?yōu)g覽器大小的情況下看到不同的大小。這個(gè)工具的另一個(gè)漂亮的用途？用它來(lái)獲取模型的截圖。

費(fèi)用：免費(fèi)

4. XRespond

 

XRespond允許您同時(shí)在不同設(shè)備上比較網(wǎng)站的多個(gè)版本。此工具的優(yōu)點(diǎn)在于，您可以了解從一個(gè)設(shè)備到另一個(gè)設(shè)備提供的用戶體驗(yàn)的一致性。（用戶希望網(wǎng)站在訪問它們的任何地方都一樣。）

在橫向或縱向視圖中測(cè)試設(shè)計(jì)，并由同一制造商（如Apple或Samsung）選擇設(shè)備，或者在相似尺寸的各種設(shè)備上進(jìn)行比較。該工具的一個(gè)缺點(diǎn)是它不包括所有最新的設(shè)備，盡管列出了許多最流行的型號(hào)。

費(fèi)用：免費(fèi)

5. Screenfly

 

Screenfly有一些很好的工具，比如分享，這樣你就可以作為一個(gè)團(tuán)隊(duì)來(lái)測(cè)試和查看響應(yīng)式設(shè)計(jì)。它包括比其他一些工具更多的設(shè)備類型 - 臺(tái)式電腦，手機(jī)，平板電腦，電視機(jī)以及添加任何自定義屏幕尺寸的功能。

工具允許您通過(guò)頂部的簡(jiǎn)單點(diǎn)擊按鈕進(jìn)行旋轉(zhuǎn)，滾動(dòng)等操作，一切都可以在瀏覽器中正常工作。

費(fèi)用：免費(fèi)

6. LambdaTest

 

LambdaTest是此列表中更強(qiáng)大的工具之一。它包括在2,000多種真實(shí)瀏覽器和操作系統(tǒng)上進(jìn)行測(cè)試的能力。

這個(gè)工具不僅可以看到您的網(wǎng)站的外觀，還可以在實(shí)時(shí)環(huán)境中測(cè)試兼容性，用戶體驗(yàn)，像素完美度等。它可以測(cè)試多種設(shè)備，瀏覽器和瀏覽器版本，因此您可以準(zhǔn)確了解網(wǎng)站的工作原理。

您可以在線獲取所有外觀的截圖，甚至可以與工具（和團(tuán)隊(duì)）進(jìn)行協(xié)作。此外，諸如此類優(yōu)質(zhì)工具的優(yōu)勢(shì)在于它包含調(diào)試功能，可幫助您解決設(shè)計(jì)問題。

成本： Lite版本是免費(fèi)的; 付費(fèi)計(jì)劃起價(jià)為每月15美元

7.響應(yīng)式設(shè)計(jì)圖解

 

響應(yīng)式設(shè)計(jì)Illustrated是一種比測(cè)試工具更具規(guī)劃性的工具。考慮這個(gè)初學(xué)者選項(xiàng)，您可以使用它來(lái)幫助可視化寬高比以及如何為不同的設(shè)備和屏幕尺寸規(guī)劃設(shè)計(jì)元素。

您可以在瀏覽器中完成所有操作，因此您可以直觀地探索如何考慮不同尺寸的設(shè)計(jì)。

費(fèi)用：免費(fèi)

8.響應(yīng)式Web設(shè)計(jì)測(cè)試工具

 

響應(yīng)式Web設(shè)計(jì)測(cè)試工具是一個(gè)基于URL的簡(jiǎn)單查看器，可讓您按大小或設(shè)備類型比較設(shè)備。

這個(gè)工具的優(yōu)點(diǎn)是切換選項(xiàng)，只需單擊即可查看不同的方向，長(zhǎng)度或視圖。如果您想托管此工具以在您自己的環(huán)境中進(jìn)行測(cè)試，那也是一種選擇。（因此，您可以在網(wǎng)站上線之前進(jìn)行測(cè)試。）

該工具的開發(fā)人員Matt Kersley已將其提供給Github。

費(fèi)用：免費(fèi)

9. Designmodo響應(yīng)測(cè)試

 

Designmodo響應(yīng)測(cè)試可能是測(cè)試您的網(wǎng)站設(shè)計(jì)的最佳工具之一。它包括大量易于切換，大量設(shè)備選項(xiàng)和干凈的界面作為觀看環(huán)境。

用戶還可以添加自定義尺寸和不同方向的視圖。它經(jīng)常使用新設(shè)備進(jìn)行更新，因此您可以輕松進(jìn)行測(cè)試。

費(fèi)用：免費(fèi)

10. CrossBrowserTesting

CrossBrowserTesting是一款高級(jí)工具，可提供手動(dòng)和自動(dòng)測(cè)試。用戶可以在超過(guò)1,500個(gè)真實(shí)桌面和移動(dòng)瀏覽器上在云中運(yùn)行手動(dòng)，可視和Selenium測(cè)試。

該工具具有高度可擴(kuò)展性 - 即使對(duì)于企業(yè)級(jí)操作也是如此。它易于部署，包括調(diào)試工具，可在多種瀏覽器，版本和設(shè)備上運(yùn)行，并具有強(qiáng)大的測(cè)試配置，因此您可以在測(cè)試成為大問題之前發(fā)現(xiàn)問題。

費(fèi)用：收費(fèi)

結(jié)論

你有一個(gè)不在此列表中的最喜歡的工具嗎？與我們分享。我們喜歡看到我們不了解的工具。

與任何網(wǎng)站設(shè)計(jì)和開發(fā)工具一樣，在確定一件事之前，最好先玩幾個(gè)選項(xiàng)。大多數(shù)這些工具可以幫助您確定您的設(shè)計(jì)是否正常工作，但所有工具的工作方式略有不同，并且具有不同級(jí)別的用戶控制。四處游玩，找到最舒適的一個(gè)。