【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 7 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

Chrome 開發人員工具-device toolbar

》RWD 入門原則系列

準備大量實體裝置測試網頁的呈現效果並不實際,我們通常是藉由工具來達到測試的目的,可用的的工具相當多,就學習而言,Chrome開發工具內建的device toolbar就相當足夠了,在功能上這組工具甚至比大多數的測試工具先進許多,它不僅模擬行動裝置尺寸,同時以實際的行動裝置模式執行網頁。

開啟Chrome瀏覽器,按下Ctrl+Shift+I 快速鍵,開啟「開發人員工具」,於工具列的左下角按一下「toggle device toolbar」或是直接按下Ctrl+Shift+M,開啟支援行動裝置檢視的device toolbar工具,此時瀏覽任意網頁-例如YouTube,瀏覽器將直接切換至此網站的行動裝置版本。


你可以透過上方尺寸切換功能,根據測試需求切換至指定的裝置或是尺寸呈現,最左邊是Responsive選單,將其展開可以看到目前流行的行動裝置,點選任一選項可以切換至其對應的螢幕呈現。


除此之外,在尺寸標示的下面有常見尺寸的尺規,直接點擊可以切換至對應的螢幕尺寸,例如以下是點擊常見平板尺寸(768px)呈現的結果。


當你的網站測試不僅僅只是尺寸調整,還要測試行動版的切換效果,可以試試直接使用這套Chrome 內建的開發工具。

》RWD 入門原則系列


沒有留言: