- 相關(guān)推薦
如何快速測(cè)試響應(yīng)式網(wǎng)頁設(shè)計(jì)的Chrome擴(kuò)展
測(cè)試響應(yīng)式的網(wǎng)站可以有很多方式,下面為大家分享的是使用 Chrome 擴(kuò)展版的 RWD 測(cè)試工具「Responsive Web Design Tester」測(cè)試效果也不錯(cuò)哦,下面來看看介紹。
使用教程
下載 「Responsive Web Design Tester」Chrome 擴(kuò)展,安裝后,瀏覽器右上角會(huì)多出一個(gè)擴(kuò)展圖標(biāo),點(diǎn)擊他就可以設(shè)置當(dāng)前網(wǎng)站用什么樣的設(shè)備來展示了,如下圖:
新增設(shè)備
此擴(kuò)展默認(rèn)有流行的移動(dòng)設(shè)備,Apple、Android、平板等等已經(jīng)很齊全了,然而你若想添加其它,可以通過設(shè)置該擴(kuò)展了添加,并且支持添加用戶代理(User-Agent)。
Step 1: 右擊擴(kuò)展圖標(biāo),在彈出的菜單選擇「選項(xiàng)」即要調(diào)出設(shè)置界面:
Step 2: 點(diǎn)擊「New Device」按鈕,并設(shè)置對(duì)應(yīng)的名稱分辨率即可。
對(duì)于不懂添加User Agent 的可以隨機(jī)添加,或復(fù)制其它選項(xiàng)的,又或者查看 User Agent List 這個(gè)列表來添加對(duì)應(yīng)的用戶代理。
RWD Tester Chrome 擴(kuò)展特色
以簡潔的新窗口形式展示網(wǎng)頁(無URL 地址欄、書簽欄等干擾)
方便快捷的查看方式(直接在瀏覽器右上角圖標(biāo)選擇查看,也支持鼠標(biāo)右鍵)
可自定義分辨率
【如何快速測(cè)試響應(yīng)式網(wǎng)頁設(shè)計(jì)的Chrome擴(kuò)展】相關(guān)文章:
響應(yīng)式網(wǎng)頁設(shè)計(jì)技巧03-18
響應(yīng)交互式網(wǎng)頁設(shè)計(jì)12-03
響應(yīng)式網(wǎng)頁設(shè)計(jì)的工具有哪些11-17
響應(yīng)式網(wǎng)站該如何設(shè)計(jì)12-04
自適應(yīng)設(shè)計(jì)與響應(yīng)式網(wǎng)頁設(shè)計(jì)的區(qū)別02-02
勸導(dǎo)式網(wǎng)頁設(shè)計(jì)建議03-14
Dreamweaver如何制作網(wǎng)頁設(shè)計(jì)03-03