在前端開發的時候測試自己的頁面在各種分辨率下顯示的情況估計是家常便飯了,而在高分屏下面測試低分辨率屏幕的顯示效果估計是很多開發者頭疼的事情,下面我就分享一些解決這個問題的工具和小技巧。
Firefox瀏覽器
推薦插件:Firesizer
介紹/安裝地址:
https://addons.mozilla.org/en-US/firefox/addon/firesizer/
這個小工具會在Firefox附加組件欄上面顯示firefox當前窗口的大小,點擊后會出現分辨率菜單可以輕松的窗口大小到你想要的分辨率。當然,你也可以自己添加更多你想測試的分辨率。
Chrome瀏覽器
推薦插件:Window Resizer
介紹/安裝地址:
https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonf
這個插件的功能跟firefox那個基本上差不多,區別只是預置了更多的分辨率(包括手機的)和更漂亮的界面.
IE瀏覽器
IE這塊就沒有啥插件了(順便鄙視下M$),必須靠其他的方法解決問題:
在你的窗口運行JS代碼即可設置到相關分辨率。
javascript:self.resizeTo(1024,768);
IE9以上的瀏覽器你可以在開發者工具里面的腳本控制台運行這個代碼,立桿見影~!
IE9以下的的瀏覽器你可以讓這個代碼在頁面上執行就行.
通用解決法A:
第三方軟件 Sizer | Window Resizer
Sizer的下載地址
http://www.brianapps.net/sizer/
Window Resizer下載地址(這個軟件是德語的,不過界面簡單,相信你研究一下就能上手)
http://www.joerg-rosenthal.com/en/resize/download.html
這兩款軟件均可以幫助你將你指定的瀏覽器窗口設定到你需要的大小。
通用解決法B:
安裝一個Windows虛擬機,裝好你要測試的所有瀏覽器,調好分辨率去測試吧!!
如果看不到圖片的話,請移步:http://be-evil.org/how-to-resize-your-broswer-window.html