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

Step2
過一回就會看到,剛所輸入網址的網頁畫面,這時可從上方的圖示,更改螢幕的尺寸或解析。

Step3
比較酷的是,可模擬比目前螢幕尺寸還大的螢幕。

Step4
由於梅干的筆電只有15吋,這時可切換成24吋,看網頁在24吋下,左右的留白狀況,這算是目前可模擬出,比現形規格更大的螢幕進行測試。

Step5
除了變大,當然也可縮小成手機螢幕的解析。

Step6
當縮成手機解析時,右下角也會顯示目前的顯示尺寸。

Step7
甚至也可將螢幕轉向。

Step8
最特別的地方,當把頁籤切到「Retro」頁籤後,立即就會顯示目前螢幕的解析,以及所使用的瀏覽器的版號,因此當有跑版時,就更好除錯啦!
