close
♣梅問題‧教學網【Minwt】♣

♣梅問題‧教學網【Minwt】♣


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

Posted: 06 Mar 2014 05:30 PM PST

梅問題-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自適應網頁檢測工具
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 knoledge 的頭像
    knoledge

    討論

    knoledge 發表在 痞客邦 留言(0) 人氣()