iPhone X 顶部底部bug解决

iphoneX设备基础信息

**iphoneX屏幕组成：上部齐刘海（44px）+ 安全区域（safe area）+ 底部手势区域（34px）。
默认，页面只显示在“安全区域”中，导致屏幕顶部和底部看起来很别扭，此时可以通过如下几种方式进行适配：
**

在meta标签中添加viewport-fit

viewport-fit

• contain 可视窗口完全包含网页内容
• cover 网页内容完全覆盖可视窗口
• auto 类似contain

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

当设置viewport-fit=cover时，如下四个值需要设置，页面才会显示在安全区域中，设置如下：

  body { 
    
        padding-top: constant(safe-area-inset-top);  //为导航栏+状态栏总高度（88px）
    
        padding-left: constant(safe-area-inset-left);    //如果未竖屏时，为0  
    
        padding-right: constant(safe-area-inset-right);   //如果未竖屏时，为0  
    
        padding-bottom: constant(safe-area-inset-bottom);   //为底部圆弧高度（34px）
}

判断iPhoneX机型

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    /* 这代表IPX 的屏幕竖屏模式*/
}

@media only screen and (width: 812px) and (height: 375px) and (-webkit-device-pixel-ratio: 3) {
    /* 这代表IPX的横屏模式 */
}

定义类样式

.fix_iphonex {
  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    padding-bottom: 34px;
  }
}

ios手机页面里可滚动内容滚动不流畅

ios手机上，网页中可滚动区域滚动不流畅，手指滑动多少页面就只滚动多少，没有弹性效果
解决办法：-webkit-overflow-scrolling : touch;