使用 Chrome 瀏覽器檢視 RWD 響應式網頁設計
使用行動裝置上網已成為常態,網頁採用響應式設計可以因應不同螢幕尺寸提供最佳瀏覽體驗,需要在電腦上測試響應式網頁,之前介紹一款 RWD Tester 瀏覽器外掛可用各種尺寸檢視網頁。還有 Chrome 瀏覽器內的開發人員工具也有這項功能,無須安裝任何軟件就能模擬多種裝置。


Google Chrome 瀏覽器已經內建行動裝置瀏覽功能,在開發人員工具中有項「Toggle device toolbar」,點擊它能切換多種行動裝置檢視網頁。

使用說明:

使用 Google Chrome 開啟「開發人員工具」。
使用 Chrome 瀏覽器檢視 RWD 響應式網頁設計

點擊「Toggle device toolbar」切換裝置工具欄,可檢視不同尺寸的網頁。
使用 Chrome 瀏覽器檢視 RWD 響應式網頁設計

「Responsive」可自行調整式窗尺寸來檢視響應式網頁效果。
使用 Chrome 瀏覽器檢視 RWD 響應式網頁設計

或是從下拉選單挑選行動裝置,例如:iPhone X。
使用 Chrome 瀏覽器檢視 RWD 響應式網頁設計

點擊「旋轉圖示」可以切換手機直向或橫向。
使用 Chrome 瀏覽器檢視 RWD 響應式網頁設計

點選「Edit」可增加其他行動裝置到選單中。
使用 Chrome 瀏覽器檢視 RWD 響應式網頁設計

勾選行動裝置讓它在選單中出現方便檢視網頁。
使用 Chrome 瀏覽器檢視 RWD 響應式網頁設計

若需要儲存截圖,開啟功能表點選「Capture screenshot」。
使用 Chrome 瀏覽器檢視 RWD 響應式網頁設計

Chrome 功能介紹:
【複製圖片文字】【影片子母畫面】
【網頁影片下載】【電源節能模式】
【檢視行動網頁】【網頁截圖功能】
【關閉翻譯詢問】【匯入匯出密碼】
【複製文字連結】【分頁群組管理】