H5页面的部分IOS兼容处理

最新推荐文章于 2024-05-16 08:30:39 发布

洛千陨

最新推荐文章于 2024-05-16 08:30:39 发布

阅读量1.0k

点赞数

分类专栏： uni-app + h5 文章标签： ios html5 vue 前端

本文链接：https://blog.csdn.net/qq_44242707/article/details/127103993

版权

uni-app + h5 专栏收录该内容

9 篇文章

订阅专栏

本文探讨了在uni-app开发的H5项目中，如何解决popup弹窗层级问题，确保遮罩层正确显示并调整底部安全距离。还介绍了防止页面下拉滑动的技巧，通过修改mounted方法实现iOS兼容处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

IOS兼容处理

环境：uni-app开发H5项目，H5项目链接webview嵌入app中

popup弹窗显示层级问题

在这里插入图片描述
问题：遮罩层遮挡位置不正确有白边，提交按钮应该在最底部却显示在popup上面
解决：将popup组件放到外层组件中，避免放到内层组件中

页面高度计算

IOS底部有安全距离，设置样式时要考虑安全距离height: calc(100vh - 50px - env(safe-area-inset-bottom));

禁止下拉滑动页面

mounted() {
    let element = document.getElementById('home')
    element.addEventListener('touchmove', function (e) {
        e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
    }, {passive: false}); //passive 参数不能省略，用来兼容ios和android
},