1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. Chrome外掛-「網設必備」的三套RWD自適應網頁檢測工具

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自適應網頁檢測工具