iPhone X H5适配

• 在 H5 页面链接一个 iphonex.css 来给 iPhone X 访问的页面增加对应的适配层
• 在 H5 页面上给对应的 dom 结构加上适配的类名

iphonex.css

@media only screen and (device-width: 750px) and (device-height: 812px) and (-webkit-device-pixel-radio: 3) {
  /* 增加头部是配层 */
  .has-topbar {
    height: 100%;
    box-sizing: border-box;
    padding-top: 44px;
    &:before {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 44px;
      background-color: #000000;
      z-index: 9998;
      content: '';
    }
  }

  // 增加底部适配层
  .has-bottombar {
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 34px;
    &:after {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 34px;
      background: #f7f7f8;
      content: '';
      z-index: 9998;
    }
  }
  
  .bottom-menu-fixed {
    bottom: 34px;
  }
}

HTML

  
  
  

  
  
  
  
  
  


 

    
导航1
    
导航2
    
导航3
    
导航4
  

参考阅读 :

• iPhone X 适配 手Q H5页面通用解决方案
• 剖析 iOS 11 网页适配问题