如何在chrome浏览器上调试特定机型的屏幕效果

需求：有个项目只适配了手机，屏幕宽度大于手机尺寸是俩侧有灰色背景，现在要适配小米note4平板，如何精确适配？

步骤：

1.打开chrome

F12，点击设备切换按钮，点击上方的手机型号选择，点击下拉列表最下边的eDit

2.出现如下图界面

增加机型，填写数据

3.数据如何计算？

1）比如小米note4平板，到小米官方商城查询可得下图。

2)计算device pixel ratio（设备像素比）

devicePixelRatio ，它是设备上物理像素和设备独立像素( device-independent pixels (dips) )的比例，即 devicePixelRatio = 屏幕物理像素/设备独立像素 

例如iPhone4S，分辨率为：960×640，取屏幕宽度计算，物理像素640px，设备独立像素320px，那么，devicePixelRatio 值为 640px / 320px = 2，又如iPhone3，计算出来的 devicePixelRatio 值为 320px / 320px = 1

我们也可以这样理解，由于160ppi是一个标准像素，那么283ppi约为1.77，即设备像素比约为1.77.

这里还有几个数据，可供参考:

ipone5s,1136*640像素分辨率，326ppi:设备像素比= 326/160 约等于 2.03

ipone6,1334*750像素分辨率，326ppi:设备像素比= 326/160 约等于 2.03

ipone5 Plus，1920*1080像素分辨率，401ppi：:设备像素比= 326/160 约等于 2.51

这就是设备像素比一般是1,1.5,2,2.5,3的由来。。。

3)根据以上结论我们可以得出，小米note 4 平板的设备像素比约为1.77

手机分辨率的width、height，分别为1920/1.77=1085  和  1200/1.77=678

4)输入user agent string，简单的方法是打开手机某浏览器，在地址栏输入javascript:alert(navigator.userAgent)，弹出user agent string，再手敲到模拟器user agent string 输入框中，也可以不写，毕竟我们只是为了屏幕适配；

最终结果如下: