快來新增一篇文章,將能打開個人文章頁服務!

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

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


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


操作說明:
使用 Google Chrome 開啟「開發人員工具」。


點擊「Toggle device toolbar」切換裝置工具欄,可檢視不同尺寸的網頁。


「Responsive」可自行調整式窗尺寸來檢視響應式網頁效果。


或是從下拉選單挑選行動裝置,例如:iphone X。


點擊「旋轉圖示」可以切換手機直向或橫向。


點選「Edit」可增加其他行動裝置到選單中。


勾選行動裝置讓它在選單中出現方便檢視網頁。


若需要儲存截圖,開啟功能表點選「Capture screenshot」。


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

comment