浏览器分辨率测试
浏览器分辨率测试是非常常见的一种兼容性测试。今天我就以Google Chrome 为例，来汇总整理一下其手动测试常用的工具，如下所示：
1.1 Chrome自带兼容性工具
这里主要是Chrome自带的调试工具为例，操作步骤如下所示：
- 1.F12打开调试模式–>Settings->Devices
- 2.添加模拟器，如下所示：
以上红色框中内容为必填填
主要参数如下所示：
- Device Name:设备名，可随意填写
- Width:设备的宽
- Height:设备的高
- Device pixel ratio:设备像素比，设备上物理像素和设备独立像素比例，其计算方式如下所示：
devicePixelRatio = 屏幕物理像素/设备独立像素
一个标准像素是160ppi，假设需要模拟设备为1920*1080手机端，则宽和高的计算结果如下所示：
**
- 分辨率：1920*1080
- 像素密度：400
- 设备像素比：400/160=2.5
- 设备独立像素-高=1080/2.5=432
- 设备独立像素-宽=1920/2.5=768
- User agent String:用户代理，获取方法如下所示：
在浏览器地址栏中输入javascript:alert(navigator.userAgent)，再复制过来即可
- 最后是指设备类型，有Mobile/Mobile(no touch)/Desktop/Desktop(touch)根据实际情况选择。
- 3.添加完成，勾选添加的自定义设备
- 4.在页面选择添加的自定义设备即可
1.2 第三方工具
1.2.1 Resolution Test
Resolution Test是一款为Chrome制作的调整窗口大小的工具插件，通过选择不同分辨率来打开相应大小的窗口。
- 1.安装步骤
在Chrome网上应用店搜索Resolution Test安装即可
- 2.使用方法
打开Resolution Test窗口，选择对应的分辨率，再点击View all selected即可，如下所示：
1.2.2 Window Resizer
Window Resizer也是一款为Chome制作的调整窗口大小的工具插件，从而让浏览器能适应不同大小的分辨率。
- 1.安装步骤
在Chrome网上应用店搜索Window Resizer安装即可
- 2.使用方法
打开Window Resizer插件，选择对应的分辨率，点击即可，如下所示：
推荐一个网站： chrome插件下载网，进去里面下载对应的插件即可
1.2.3 使用在线网站testsize.com/
用testsize.com调试在线网站不同分辨率下的效果
注意只能调试上线的网页
网址http://testsize.com/
我们的内网ip也是一样可以的，所以可以用来调试我们的本地程序
