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

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

相關文章

沒網路也不無聊~Google Chrome離線版限定「小恐龍」遊戲

沒網路也不無聊~Google Chrome離線版限定「小恐龍」遊戲

Chrome外掛-「Print Friendly & PDF」一鍵快速將當前網頁轉換成PDF檔

Chrome外掛-「Print Friendly & PDF」一鍵快速將當前網頁轉換成PDF檔

Google Chrome瀏覽器的網址列暗藏計算機功能,不但可加、減、乘、除還可開根號

Google Chrome瀏覽器的網址列暗藏計算機功能,不但可加、減、乘、除還可開根號

免裝軟體!打開瀏覽器,從LINE STORE隔空下載完整貼圖

免裝軟體!打開瀏覽器,從LINE STORE隔空下載完整貼圖

Chrome外掛-FireShot一鍵擷取整頁的網頁內容畫面

Chrome外掛-FireShot一鍵擷取整頁的網頁內容畫面





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 1 梅留言

  • 第1梅
    geek01 說道:

    想分享到FB或Google+社群,不過找不到分享按鈕呀,有點可惜…