![使用 Chrome 瀏覽器檢視 RWD 響應式網頁設計](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpbYCKLfK5aKiEPI6NDMiRc0OItT8CfeUPMVxZce6-AEOKmQ465G4wGLjby77Q_MYeV7Wa-IoGREJ9SKtSnBb3WwMX-b0S8ffAsfhmg3rmz17FDzK0eEWSHYgzx7AZK8XgwrpdqtsFfZI/s600-rw/MobileView-chrome.webp)
Google Chrome 瀏覽器已經內建行動裝置瀏覽功能,在開發人員工具中有項「Toggle device toolbar」,點擊它能切換多種行動裝置檢視網頁。
使用說明:
使用 Google Chrome 開啟「開發人員工具」。![使用 Chrome 瀏覽器檢視 RWD 響應式網頁設計](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLbeSG3oWjjiqxCBDcmA-P6azYVgIr9annfyM8a54tlNPExhlL0ccnXvS1DSO-Zg6tIZyk7As7yUNHmTDH5UMNK4Ft2-PIqYaXfRNwEq5nrEE0guGNPuoYM8NwtBO5fUrfGMgZiSMAIkA/s0-rw/MobileView-chrome01.webp)
點擊「Toggle device toolbar」切換裝置工具欄,可檢視不同尺寸的網頁。
![使用 Chrome 瀏覽器檢視 RWD 響應式網頁設計](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSiUCI11x89BdD668toPIKdA2DbO8n5MsqvYCRCsPybWgtAEQcxwcp7gmb4361A-inCblPSILJpYQK_4F_Y43da9n1tHswVbGtb-Nc336OsxA3pBg3UCc7SMFWyLe6Wj8-iCk4SntSNLQ/s0-rw/MobileView-chrome02.webp)
「Responsive」可自行調整式窗尺寸來檢視響應式網頁效果。
![使用 Chrome 瀏覽器檢視 RWD 響應式網頁設計](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5xTvBPQPYw5QCX01nSCe_sTtrRpMP-5vUi79Zg2QLcTB3tI1j9iVwahUnfUHC8CqWsFiT3wtl58dUjy-b-fklSzXmtBNz4he0qb77bVrPL7jQYh9DuTD19zlE-AAE12Wzd9ZdeIzOrFM/s0-rw/MobileView-chrome03.webp)
或是從下拉選單挑選行動裝置,例如:iPhone X。
![使用 Chrome 瀏覽器檢視 RWD 響應式網頁設計](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg55hA5LOFftug8tHLTXltx3nhUvtQS-HNN6FHruybyE1af4SJig6umiJzjKX9o1lCtuP4lk2IubgXpmbRbvgesXJWiC1nn5Rhdki5HRMpIXt5et4ztH3USp8AWKTa24cQS6iDvEQ-sHbQ/s0-rw/MobileView-chrome04.webp)
點擊「旋轉圖示」可以切換手機直向或橫向。
![使用 Chrome 瀏覽器檢視 RWD 響應式網頁設計](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM9oaK2HVX1fYRYerGhSuxYcrOJGQOhUCGX6ATrqEQ2KOZ-GbmzxJAo2RC4f5Xm7ITWl8eoVGhvasi7wOTxuQmlI-hbO_Xi2TaUfnsjSQTrS2gSnzRBMoNdaYTtSElbBHDE_3qFUOKtrw/s0-rw/MobileView-chrome05.webp)
點選「Edit」可增加其他行動裝置到選單中。
![使用 Chrome 瀏覽器檢視 RWD 響應式網頁設計](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnbrC-gHIXHEJ6XmD-k3PBZIRgNCehTsmoOGxiAyl-Rote3tsIPWNgVxAS6akwUvRe-Nkk_zXMmHnW4u0NPC8X6AktjSg0NoWb99LWIQ0F-ck6kS9n4RsxqZb8AjNzVwujDx6C11KoXHw/s0-rw/MobileView-chrome06.webp)
勾選行動裝置讓它在選單中出現方便檢視網頁。
![使用 Chrome 瀏覽器檢視 RWD 響應式網頁設計](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEialIvgGxQU3hxi5I5NXZM_UueYSIRpnYQzlRbKzM-SQbvoGrN7fgjwZe1LGs37MLg3_1ZyRFLe8fK4e4B2ECezJtPoL95x9pE9zkTCKuBNFsCTB4WaCZ9g58WUFJLmYql-vnxoD2bE6fE/s0-rw/MobileView-chrome07.webp)
若需要儲存截圖,開啟功能表點選「Capture screenshot」。
![使用 Chrome 瀏覽器檢視 RWD 響應式網頁設計](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqBSci31Yki50LeUrrGV7Eblh4eVzG4JSPR1BOTZ34J7opOKbdzoUgqK87AHzLUbRi6PTBWr89CMNlN8xb0jW2ed8nEVNpQc8SZF4Kvb2SnDfVAmF_cn6bxauccVdZTpIncy-98RtUsS8/s0-rw/MobileView-chrome08.webp)
Chrome 功能介紹:
【複製圖片文字】【影片子母畫面】
【網頁影片下載】【電源節能模式】
【檢視行動網頁】【網頁截圖功能】
【關閉翻譯詢問】【匯入匯出密碼】
【複製文字連結】【分頁群組管理】