網頁設計, 網頁資源

Screenfly / Multi Screen Test 測試網頁在不同裝置下的顯示效果,與抓取裝置實際解和瀏覽器版號

梅干2017/12/07
梅問題-Screenfly / Multi Screen Test測試網頁在不同裝置下的顯示效果,以及抓取裝置的實際解析與瀏覽器版號
  現在在設計網頁時,RWD自適應網頁已變成基本需求了,隨著現在裝置愈來愈多,解析也愈來愈多元,這也讓在設計網頁時,變得更加的複雜,所要考量版面呈現的細節也愈多,同時在設計完畢後,大部分的朋友,都會習慣用拖拉方式,來進行測試,或是開啟Chrome的開發人工具中的行動裝置,來進行測試,透過開發人工具可以有比較精準的解析來判斷,甚至也可以轉向,了解網頁在手機橫向時的呈現效果為何,是否有跑版的問題。
  但無論怎麼設定,都只限於自己螢幕大小中呈現,因此無法模擬比自己螢幕的尺寸,因此最近梅干發現一個超棒的線上測試平台,不但可以針對各裝置進行模擬外,甚至還可以模擬出,比現行裝置還大的螢幕解析,當出現跑版時,還能快速的抓取出,目前裝置的實際解析,以及瀏覽器的版號,如此一來就可針對裝置的資訊進行微調,因此身為網頁設計的朋友,千萬別錯過這個RWD測試平台。
Quirktools
網站名稱:Screenfly / Test Your Website at Different Screen Resolutions
網站連結:http://quirktools.com/screenfly/

Step1
當進到這平台後,將要測試的網址,填到輸入框後,再按「Go」
梅問題-Screenfly / Multi Screen Test測試網頁在不同裝置下的顯示效果,以及抓取裝置的實際解析與瀏覽器版號
Step2
過一回就會看到,剛所輸入網址的網頁畫面,這時可從上方的圖示,更改螢幕的尺寸或解析。
梅問題-Screenfly / Multi Screen Test測試網頁在不同裝置下的顯示效果,以及抓取裝置的實際解析與瀏覽器版號
Step3
比較酷的是,可模擬比目前螢幕尺寸還大的螢幕。
梅問題-Screenfly / Multi Screen Test測試網頁在不同裝置下的顯示效果,以及抓取裝置的實際解析與瀏覽器版號
Step4
由於梅干的筆電只有15吋,這時可切換成24吋,看網頁在24吋下,左右的留白狀況,這算是目前可模擬出,比現形規格更大的螢幕進行測試。
梅問題-Screenfly / Multi Screen Test測試網頁在不同裝置下的顯示效果,以及抓取裝置的實際解析與瀏覽器版號
Step5
除了變大,當然也可縮小成手機螢幕的解析。
梅問題-Screenfly / Multi Screen Test測試網頁在不同裝置下的顯示效果,以及抓取裝置的實際解析與瀏覽器版號
Step6
當縮成手機解析時,右下角也會顯示目前的顯示尺寸。
梅問題-Screenfly / Multi Screen Test測試網頁在不同裝置下的顯示效果,以及抓取裝置的實際解析與瀏覽器版號
Step7
甚至也可將螢幕轉向。
梅問題-Screenfly / Multi Screen Test測試網頁在不同裝置下的顯示效果,以及抓取裝置的實際解析與瀏覽器版號
Step8
最特別的地方,當把頁籤切到「Retro」頁籤後,立即就會顯示目前螢幕的解析,以及所使用的瀏覽器的版號,因此當有跑版時,就更好除錯啦!
梅問題-Screenfly / Multi Screen Test測試網頁在不同裝置下的顯示效果,以及抓取裝置的實際解析與瀏覽器版號
UAG軍規iPhone防摔殼