逍遙の窩

我懂得不多;分享我懂的。

2018/04/03

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

行動上網的流量已逐步大於電腦,網站採用響應式網頁方便訪客瀏覽,在各種裝置都有適合的呈現。當網站建構完成後要檢視效果,或許會想借助免費應用程式,曾經介紹一款瀏覽器外掛 RWD Tester 可用各種尺寸檢視網頁。後來才發現有點多此一舉,無須安裝任何工具軟件,Chrome 瀏覽器就可檢視。

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

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





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


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


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


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


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


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


若需要儲存截圖,開啟功能表點選「Capture screenshot」。
聲明:
● 站內提供下載的軟體經由網路取得,版權皆屬於原創者(公司)。
● 影音下載介紹網站與軟體功能,隨意下載、散播影片可能觸法,請自行注意。
● 本著作係採用創用 CC 姓名標示-非商業性-禁止改作 4.0 國際 授權條款授權。
創用 CC 授權條款