vue移动端项目底部适配iphonex

最新推荐文章于 2023-06-09 20:32:17 发布

codezha

最新推荐文章于 2023-06-09 20:32:17 发布

阅读量3.4k

点赞数

分类专栏：前端 Vue

本文链接：https://blog.csdn.net/codezha/article/details/105066443

版权

前端同时被 2 个专栏收录

63 篇文章 0 订阅

订阅专栏

Vue

21 篇文章 0 订阅

订阅专栏

媒体查询

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;
    }
}

配合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);
    }
}

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

}