vue移动端项目底部适配iphonex

1. 媒体查询

   App.vue中样式中添加以下代码

   /* 适配iphoneX iphoneXS */
   @media screen and (device-width:375px) and (device-height:812px){
       .footer {
         margin-bottom:34px;
       }
   }
   /* 适配iphoneXR iphoneXSMax */
   @media screen and (device-width:414px) and (device-height:896px){
       .footer {
         margin-bottom:34px;
       }
   }
   

2. 配合meta标签适配

   meta标签中添加viewport-fit=cover

   <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
   

   全局配置css

   @supports (bottom: env(safe-area-inset-bottom)){
       body,
       .footer（底部栏）{
           padding-bottom: constant(safe-area-inset-bottom);
           padding-bottom: env(safe-area-inset-bottom);
       }
   }
   

3. javascript动态适配

   window.devicePixelRatio

   是设备上物理像素和设备独立像素的比例，即公式表示为：window.devicePixelRatio = 物理像素 / dips。

   物理像素（physical pixel）：设备能控制显示的最小单位
   设备独立像素（device-independent pixel）：独立于设备的用于逻辑上衡量像素的单位
   每英寸像素量（pixels per inch）：一英寸长度上可以并排的像素数量

   var isIphoneX = window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && testUA('iPhone')
   
   if (isIphoneX) {
   
    check()
   
    window.onscroll = throttle(check, 200)
   
   }
   
   function check () {
   
    // 处理lib-flexible放大viewport的情况
   
    var scale = window.innerWidth / window.screen.width
   
    // 部分浏览器在滚动页面时会显示/隐藏工具栏，影响视口高度。在有底部工具栏的情况下，不做iPhoneX的fix。100为经验值
   
    if (window.screen.height - window.innerHeight / scale < 100) {
   
      //动态添加底部高度样式
   
    } else {
   
      //动态移除底部高度样式
   
    }
   
   }
   
   function testUA (str) {
   
    return navigator.userAgent.indexOf(str) > -1
   
   }