Responsive Web Design Tester 快速預覽響應式網頁,可用多款手機檢視(擴充功能)

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

Responsive Web Design Tester 預覽響應式網頁

軟體簡介:
Responsive Web Design Tester 是一款瀏覽器外掛程式,使用它可以快速檢視響應式網頁。使用正確的 User-Agent(用戶代理),包括iPad、iPhone(iOS系統)、HTC、Galaxy、Nexus7(Android系統)的預設。

網頁預覽無法與行動裝置所呈現的效果完全一致,主要用在製作響應式網頁時可以方便快速的預覽各種尺寸大小。若無適合的裝置時,可以新增要使用的行動設備。支援 Chrome 與 Opera 瀏覽器使用。
軟體名稱:Responsive Web Design Tester
授權型式:免費
語言介面:英文
下載安裝:【Chrome 線上商店】【Opera】

操作說明:
開啟 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 瀏覽器支援行動裝置檢視

張貼留言

0 留言