當前位置:才華齋>設計>網頁設計>

如何快速測試響應式網頁設計的Chrome擴充套件

網頁設計 閱讀(1.82W)

測試響應式的網站可以有很多方式,下面為大家分享的是使用 Chrome 擴充套件版的 RWD 測試工具「Responsive Web Design Tester」測試效果也不錯哦,下面來看看介紹。

如何快速測試響應式網頁設計的Chrome擴充套件

  使用教程

下載 「Responsive Web Design Tester」Chrome 擴充套件,安裝後,瀏覽器右上角會多出一個擴充套件圖示,點選他就可以設定當前網站用什麼樣的裝置來展示了,如下圖:

  新增裝置

此擴充套件預設有流行的移動裝置,Apple、Android、平板等等已經很齊全了,然而你若想新增其它,可以通過設定該擴充套件了新增,並且支援新增使用者代理(User-Agent)。

  Step 1: 右擊擴充套件圖示,在彈出的選單選擇「選項」即要調出設定介面:

  Step 2: 點選「New Device」按鈕,並設定對應的名稱解析度即可。

對於不懂新增User Agent 的可以隨機新增,或複製其它選項的`,又或者檢視 User Agent List 這個列表來新增對應的使用者代理。

  RWD Tester Chrome 擴充套件特色

以簡潔的新視窗形式展示網頁(無URL 位址列、書籤欄等干擾)

方便快捷的檢視方式(直接在瀏覽器右上角圖示選擇檢視,也支援滑鼠右鍵)

可自定義解析度