• 分享一个iphone X的适配问题
  • 发布于 2个月前
  • 215 热度
    1 评论
最近在写活动页,遇到了关于iphoneX 适配的问题,今天和大家分享一下。给大家一个万能的写法。嘿嘿嘿~~~

1.介绍
iPhone X 回味h5的页面显示留有边缘,内容自动的会填充显示在安全区域内,这样他的圆角或者传感器设备(就是刘海)不会被遮挡。

2. IOS11 提供了一个新特征对现有viewport 标签的扩展,称为viewport-fit     
 viewport-fit:auto // 默认
 view-fit:cover // 覆盖
 view-fit:contain // 包含
 这个有点像background-size 属性
 
3.再写index.html(index.ejs...),应该注入
<meta name="format-detection" content="telephone=no,email=no,adress=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
注入view-fit ="cover"后,我们的页面就会在设置一个安全值,不让刘海遮住我们的页面。

4.安全区域
对包含的内容选择性的应用间距,以确保他们不会被屏幕的形状所掩盖。在ios11 中的webkit 包含了一个新的CSS函数 canstant() 以及一组四个预定义的常量:
safe-area-inset-left, 
safe-area-inset-right,
safe-area-inset-top,
safe-area-inset-bottom
我最近做的一个是有背景图的活动页,遇到的问题是,如下:

发现没,我的模拟器是iPhone X,地下莫名其妙的出现了白条,让我很是恼火。问同事没法解决,看了几篇文章,加上自己的判断,就是这随便写了下,居然成功。
具体做法是wrap 层(最外层),我加了绝对定位:
body {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  font-family: PingFang-SC-Semibold;
}

.wrap {
  width: 100%;
  position: absolute;
  top: constant(safe-area-inset-top);
  left: constant(safe-area-inset-left);
  right: constant(safe-area-inset-right);
  bottom: constant(safe-area-inset-bottom);
  overflow: scroll;
  background-color: rgba(255, 255, 255, 1);
  .header {
    height: 480px;
    background-image: url('../assets/title.png');
    background-size: cover;
  }
最关键的就是这个绝对定位和 overflow:scroll
折让我的包裹层相当于普通手机的页面(我自己这么认为)
如果你们也遇到这种坑的人,可以试一试。
用户评论