Responsive Viewer插件是一款響應(yīng)式網(wǎng)頁查看工具，它可以展示你的網(wǎng)頁在多個(gè)尺寸屏幕下的樣式，并將所有的屏幕在一個(gè)頁面上展示，你可以快速查看網(wǎng)頁的響應(yīng)式設(shè)計(jì)。Responsive Viewer 使用起來非常容易，你只需要打開要查看的網(wǎng)頁，然后點(diǎn)擊擴(kuò)展按鈕就可以轉(zhuǎn)到查看頁面。歡迎大家前來下載使用。

概述

在一個(gè)視圖中顯示多個(gè)屏幕的 Chrome 擴(kuò)展程序。該擴(kuò)展將幫助前端開發(fā)人員在開發(fā)響應(yīng)式網(wǎng)站/應(yīng)用程序時(shí)測(cè)試多個(gè)屏幕。

Dima Hamayunau (https://dribbble.com/abybe) 的圖標(biāo)。

在這里你可以看到Responsive Viewer在各種設(shè)備上的表現(xiàn)，默認(rèn)的有iPhone、Galaxy、Pixel等多種型號(hào)的設(shè)備，還可以查看中等和大屏幕下的表現(xiàn)

你要兼容特定的設(shè)備，還可以添加設(shè)備，可以自定義尺寸和User Agent，雙擊對(duì)應(yīng)的設(shè)備還可以刪除或修改其參數(shù)

該工具還提供了一些選項(xiàng)，比如你可以根據(jù)自己的需求，調(diào)整設(shè)備順序，將比較重要的設(shè)備拖拽到上方，方便查看，對(duì)于不需要適配的屏幕，還可以將其隱藏

還可以調(diào)整查看模式，縱向還是橫向，進(jìn)行翻轉(zhuǎn)屏幕等操作，讓你的響應(yīng)式設(shè)計(jì)工作更簡單

隱私說明：

該擴(kuò)展程序不會(huì)跟蹤或收集您的任何數(shù)據(jù)，甚至沒有連接到任何服務(wù)器來存儲(chǔ)數(shù)據(jù)。

插件安裝方法

方法一：.crx文件格式插件安裝

1.首先用戶點(diǎn)擊谷歌瀏覽器右上角的自定義及控制按鈕，在下拉框中選擇設(shè)置。

2.在打開的谷歌瀏覽器的擴(kuò)展管理器最左側(cè)選擇擴(kuò)展程序或直接輸入：chrome://extensions/

3.找到自己已經(jīng)下載好的Chrome離線安裝文件xxx.crx，然后將其從資源管理器中拖動(dòng)到Chrome的擴(kuò)展管理界面中，這時(shí)候用戶會(huì)發(fā)現(xiàn)在擴(kuò)展管理器的中央部分中會(huì)多出一個(gè)”拖動(dòng)以安裝“的插件按鈕。

4.松開鼠標(biāo)就可以把當(dāng)前正在拖動(dòng)的插件安裝到谷歌瀏覽器中去，但是谷歌考慮用戶的安全隱私，在用戶松開鼠標(biāo)后還會(huì)給予用戶一個(gè)確認(rèn)安裝的提示。

5.用戶這時(shí)候只需要點(diǎn)擊添加按鈕就可以把該離線Chrome插件安裝到谷歌瀏覽器中去，安裝成功以后該插件會(huì)立即顯示在瀏覽器右上角（如果有插件按鈕的話），如果沒有插件按鈕的話，用戶還可以通過Chrome擴(kuò)展管理器找到已經(jīng)安裝的插件。

方法二：文件夾格式插件安裝

1.首先用戶點(diǎn)擊谷歌瀏覽器右上角的自定義及控制按鈕，在下拉框中選擇設(shè)置。

2.在打開的谷歌瀏覽器的擴(kuò)展管理器最左側(cè)選擇擴(kuò)展程序。

3.勾選開發(fā)者模式，點(diǎn)擊加載已解壓的擴(kuò)展程序，將文件夾選擇即可安裝插件。

如果你在安裝過程中出現(xiàn)下圖中的錯(cuò)誤程序包無效 CRX_HEADER_INVALID

可以參考：超詳細(xì)的Chrome 瀏覽器/瀏覽器插件安裝教程(全方法) 一文解決