在前端开发的时候测试自己的页面在各种分辨率下显示的情况估计是家常便饭了,而在高分屏下面测试低分辨率屏幕的显示效果估计是很多开发者头疼的事情,下面我就分享一些解决这个问题的工具和小技巧。
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