前端开发快速调整/保留常用浏览器尺寸（手机/pc端通用）

1. 本文适用问题与痛点：

1.1 在浏览器快速切换各种非默认尺寸

1.2 所需测试的浏览器尺寸大于你的屏幕分辨率

2. 通过控制台调整自定义尺寸（本文都以chrome浏览器为例）

按【F12】调出控制台，点击下图1处调整控制台显示的方位，在手机端页面开发的时候，本人习惯选择最右的，在屏幕右侧显示控制台。

点击下图3处图标或Ctrl + Shift + M调出自定义模式

设计人员常用的尺寸是iPhone 6/7/8(375 * 667) 和 iPhone X(375 * 812)

自定义的话点击最下方【Edit...】调出设置面板

在设计面板中点击【Add custom device...】，在下拉框中设置方案名称、宽度、高度、设备像素比（不常用），点击【Add】保存即可

添加成功后即可在之前的下拉列表中找到，做到快速切换。

另外，右上角的屏幕旋转按钮可以切换当前分辨率的宽高比

通过该方式，不只能模拟手机尺寸，也可以模拟大于当前屏幕宽高的尺寸，例如iMac的5120*2880，只不过是比例会有差别，比例不是100%的时候也不会影响模拟的设备宽高，见下图控制台打印部分。

通过这种方式可以测试不同尺寸浏览器出现的bug~