需求:有个项目只适配了手机,屏幕宽度大于手机尺寸是俩侧有灰色背景,现在要适配小米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 输入框中,也可以不写,毕竟我们只是为了屏幕适配;
最终结果如下: