Responsive Web Design Tester 預覽響應式網頁
前兩天介紹 Mobile View Switcher 可以將瀏覽器切換手機模式,方便在電腦上檢視行動版網頁。但是它只能使用一項 User-Agent,若要變更其他裝置需每次輸入,為了更方便預覽其他裝置(尺寸)的網頁效果,找到 Responsive Web Design Tester 可使用 iOS、Android 系統的手機與平板來預覽響應式網頁。

軟體介紹:

Responsive Web Design Tester 是一款瀏覽器擴充套件,能夠快速檢視響應式網頁,包括 iPad、iPhone、HTC、Galaxy、Nexus7 等 User-Agent (用戶代理),網頁預覽會與行動裝置呈現的效果完全一致,適合在製作響應式網頁時預覽各種尺寸大小,提供多種裝置螢幕畫面尺寸,也能新增要使用的行動設備。

補充:這款擴充功能已經下架。
軟體名稱:Responsive Web Design Tester
授權型式:免費
語言介面:英文
下載安裝:【Chrome 商店】

使用說明:

開啟 Chrome 線上應用程式商店將 RWD Tester 擴充功能添加到瀏覽器。
Responsive Web Design Tester 預覽響應式網頁

開啟網頁點擊 RWD Tester 擴充功能按鍵,選擇要預覽的裝置(HTC、三星、iphone等)。
Responsive Web Design Tester 預覽響應式網頁

HTC One X - Portrait(直向)畫面。
Responsive Web Design Tester 預覽響應式網頁

HTC One X - Landscape(橫向)畫面。
Responsive Web Design Tester 預覽響應式網頁

「Options」選項可以編輯與新增檢視裝置。
Responsive Web Design Tester 預覽響應式網頁

若要編輯現有裝置,先選擇組別,從下方選擇裝置編輯或移除。
Responsive Web Design Tester 預覽響應式網頁

點擊「New group」新增群組,輸入名稱後儲存。
Responsive Web Design Tester 預覽響應式網頁

點擊「New Device」新增用來檢視網頁的裝置。
Responsive Web Design Tester 預覽響應式網頁

輸入裝置名稱、User-Agent、尺寸,儲存後就可用該裝置檢視網頁。
Responsive Web Design Tester 預覽響應式網頁

延伸閱讀:
免安裝軟件,Chrome、Edge 瀏覽器支援檢視行動裝置網頁