您当前的位置: 站长圈 > 技术文章 > 网页前端 > 各大浏览器测试窗口自适应大小的工具

各大浏览器测试窗口自适应大小的工具

来源:站长圈 作者:adminroy 点击: 0

最近想学一下时下日渐流行的响应式布局,刚开始就有一个问题,既然是响应式的,那么可能测试的时候浏览器窗口应该要符合手机、平板、桌面等不同设备的窗口大小,还有桌面电脑不同分辨率的窗口大小。我既不是富二代,也不是专业技术人员,不可能为此去买个平板、苹果的来做试验,因此只能在桌面电脑上找方法。

我首先想到的是一个笨办法(你也不能指望笨人想出什么好办法啦),就是用一个小工具量着,然后手动拖拉浏览器窗口的大小,如图:

1.jpg
 

2.用dw6(我的版本是6,没注意以前的版本有没有这功能)打开你要编辑的这个文件,用“实时视图”预览,在窗口底部有3个图标,分别是“手机大小(480x800)”、“平板电脑大小(768x1024)”、“桌面电脑大小(1000宽)”,用来模拟切换3种设备的窗口大小。



 

3.用chrome谷歌浏览器打开文件浏览,然后点击如图所示的小图标,找到“工具”-“开发者工具”,快捷键是“Ctrl+Shift+I”,然后点击右下角一个齿轮图标(如图),有个“Overrides”可以模拟各种设备的浏览器窗口大小,也可以切换着测试,下面会显示窗口的尺寸大小:




 

4.FireFox火狐浏览器也有类似的功能,我目前的版本是25.0.1。打开“工具”-“Web开发者”-“自适应设计视图”,快捷键是“Ctrl+Shift+M”,

点开如图所示的下拉菜单,就可以看见有各种浏览器窗口的尺寸可供选择,也可以拖拉边上的按钮改变窗口预设,自定义窗口大小。


 

5.IE浏览器自带工具,我目前版本是ie10,。打开“工具”-“开发人员工具”

在随后出现的开发人员工具窗口里点“工具”-“重新调整大小”里有各种尺寸的大小,你可以点击,也可以按相应的快捷键,也可以“自定义”你想要的尺寸。