使用 Chrome 瀏覽器檢視 RWD 響應式網頁設計,免安裝任何工具

現在行動上網的流量漸漸多於電腦,採用響應式網頁能在各種裝置最佳呈現。需要檢視網頁效果之前介紹一款 RWD Tester 瀏覽器外掛,可用各種尺寸檢視網頁。後來才發現有點多此一舉,無須安裝任何工具軟件,Chrome 瀏覽器已經內建這樣的功能。

使用 Chrome 瀏覽器檢視 RWD 響應式網頁設計

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 功能介紹:
【儲存網頁截圖】【影片子母畫面】【網頁影片下載】【掃描清理電腦】
【內建暗黑主題】【關閉桌面通知】【關閉翻譯詢問】【匯入匯出密碼】