iphoneX前端适配

最近接到一个需求，让做iphoneX的适配，首先我们要了解 iphoneX需要做哪些适配

借用https://www.cnblogs.com/lolDragon/p/7795174.html网站的一个图

我们会发现在iphoneX上面有88px的安全距离，下面有34px的安全距离，当我们写bottom＝0时就会发现底下有一段很丑的灰色。作为一个前端，我们只需要做H5页让下面这一块颜色与整个页面适应即可。

话不多说，上代码

iphoneX适配代码，复制代码请翻到文章最下面

解释上面代码：

window.document.documentElement.getBoundingClientRect().width;

这个值指的是父级的右边距离浏览器原点(0,0)左边距离浏览器原点(0,0)的距离,简单来说就是父级的宽度+2padding+2border。这时有的人会问和clientWidth有什么区别呢，clientWidth等于父级的宽度+2*padding,不包括边框的宽度。

---

在使用JS的时候经常遇到的问题就是我需要获取当前屏幕的宽度和高度。每每到这个时候不知道使用哪个：

当前屏幕的高度 借用这个网站的一个图https://www.cnblogs.com/fyydnz/p/4827002.html

viewport-fit=cover：铺满整个屏幕

了解了这些你应该能轻松面对iphoneX的适配了～

复制代码区：

vardevicePixelRatio=window.devicePixelRatio;//设备像素比 ipx＝3

varscrWidth=window.document.documentElement.getBoundingClientRect().width;

varscrheight=window.screen.height;

if(devicePixelRatio===3&&scrWidth===375&&scrheight===812){

$('meta').tbattr('content','width=device-width, initial-scale=1.0, viewport-fit=cover');

// ...

}