移动端iphoneX的适配问题

在项目开发中，遇到了iPhone X的适配问题。由于本来就是image标签为等比缩放的。一时有点摸不清头脑。废话不多说了。直接开始正文吧。

<img src="__STATIC__{:THEME_NAME}/Mar2018/citynight-images/ldbg.jpg?1" class="fade" style="position: fixed;bottom:0%;left:0%;width:100%;z-index:1">
<img src="__STATIC__{:THEME_NAME}/Mar2018/citynight-images/zip.png?2" class="zipPull fade" style="position: fixed;z-index:10;top:80%;left:0%;width:100%;">
复制代码

两个image标签。效果是下拉拉链的动画效果。

第一步：首先设置网页在可视窗口的布局方式。

              在meta标签中加入viewport-fit=cover。比如在我的项目中在后面直接添加了这个属性。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,viewport-fit=cover"
	/>复制代码

这边做一下补充吧。

viewport-fit

• contain
• cover
• auto

只有打开cover 配置，才开启了 IPX 的全屏开关，默认会有保护区域的

第二步：封装JS函数来进行iPhone X的判断。

 function iphoneX(){
       	return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)
       } 复制代码

可以在其他函数中进行判断使用：

如果需要进行其他css的特有设置的话，可以再HTML标签中加入一个类，然后进行iPhone X的专有的样式设置就好了。

$(function(){
    if(iphoneX()){
   $('html').addClass('iphoneX')
  }
})复制代码

只要针对iPhone X下的元素进行调整就可以了。

如果需要的话，在图片上加入高度，最后就会默认占满全屏啦。

转载于:https://juejin.im/post/5aebc685f265da0b9e64eb32