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

快来打我* 2023-10-09 05:34 8阅读 0赞

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

步骤：

1.打开chrome

![20190925111718508.png][]

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

2.出现如下图界面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbjkzNzQ_size_16_color_FFFFFF_t_70][]

增加机型，填写数据

3.数据如何计算？

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbjkzNzQ_size_16_color_FFFFFF_t_70 1][]

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 输入框中，也可以不写，毕竟我们只是为了屏幕适配；

最终结果如下:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbjkzNzQ_size_16_color_FFFFFF_t_70 2][]

[20190925111718508.png]: https://img-blog.csdnimg.cn/20190925111718508.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbjkzNzQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190925111902737.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbjkzNzQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbjkzNzQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190925112051418.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbjkzNzQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbjkzNzQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2019092511550517.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbjkzNzQ=,size_16,color_FFFFFF,t_70