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

最终结果如下:

 

 

©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页