瀏覽器, 網頁設計, 網頁資源, 電腦不求人

Chrome外掛-「網設必備」的三套RWD自適應網頁檢測工具

2014/03/07
梅問題-Chrome外掛-網設必備的三套RWD自適應網頁檢測工具
  好不容易將自適應的網頁製作完成時,接著就是開始任意的拖拉視窗,檢測網頁是否能在各解析下正常的顯示,由於大部分只能利用目測的方式,大約抓一下目前是在平板大小,還是手機大小,其實Chrome瀏覽器中,已有許多RWD自適應網頁的檢測外掛了,只要安裝完畢後,點一下立即就可將視窗,縮放到指定的裝置下,如此一來就可知道,在各裝置下版型是否有跑位,雖然說在Chrome瀏覽器的外掛中,有相當多的RWD外掛套件,在經梅干一一的實用後,發現到這三套RWD自適應的檢測工具相當好用,因此身為網頁設計人員,絕不容錯過喔!

Mobile/RWD Tester:
外掛名稱:Mobile/RWD Tester
適用平台:Google Chrome
外掛網址:Chrome Store

當安裝完畢後,點一下Mobile/RWD Tester圖示,就會出現各種行裝置的類型。
梅問題-Chrome外掛-網設必備的三套RWD自適應網頁檢測工具
點一下後,就會跳出另一個新視窗,並將視窗縮放到指定的範圍裡。
梅問題-Chrome外掛-網設必備的三套RWD自適應網頁檢測工具
Responsive Inspector:
外掛名稱:Responsive Inspector
適用平台:Google Chrome
外掛網址:Chrome Store

這套檢測工具比較特別,它會自動偵測網頁是否有製作RWD自適應網頁,以及可切換的解析有那些。
梅問題-Chrome外掛-網設必備的三套RWD自適應網頁檢測工具
點一下視窗立即就會切換到,指定的範圍裡。
梅問題-Chrome外掛-網設必備的三套RWD自適應網頁檢測工具
Responsive Site View:
外掛名稱:Responsive Site View
適用平台:Google Chrome
外掛網址:Chrome Store

這一套有別於前面二套,除了可切換到指定的裝置外,還可旋轉視窗,像是橫向顯示或直向顯示。
梅問題-Chrome外掛-網設必備的三套RWD自適應網頁檢測工具
這套比較值得一題是,所有的變化,都會嵌在它的工作視窗裡。
梅問題-Chrome外掛-網設必備的三套RWD自適應網頁檢測工具
除了可從下拉選單中,更改裝置的類型外,也可設定瀏覽的方向。
梅問題-Chrome外掛-網設必備的三套RWD自適應網頁檢測工具