移动端IOS不兼容的情况处理小结

最新推荐文章于 2025-01-09 09:42:00 发布

张刻骨

最新推荐文章于 2025-01-09 09:42:00 发布

阅读量3.2k

点赞数 3

分类专栏：工作简记

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/zhangkegu/article/details/103766746

版权

工作简记专栏收录该内容

18 篇文章

订阅专栏

一.vant的导航tab标签产生的ios不兼容问题：

1.用了vant的tab标签页，使用吸顶模式在苹果机上会出现一个返回此页面后列表顶部tab分类标签消失的情况：

正常样式

在苹果机上顶部的导航条标签消失了（使用的吸顶，浏览器渲染后结构里自动换成fixed属性）

解决：考虑到页面的 fixed 元素失效，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了，倘若页面不会过长出现滚动，即便 fixed 元素失效，也无法跟随页面滚动，也就不会出现上面的问题了。所以我做了子元素内部滚动：

.content {
    /* main绝对定位，进行内部滚动 */
    position: absolute;
    top: 0;
    bottom: 0;
    right:0;
    left:0;
    /* 使之可以滚动 */
    overflow-y: scroll;
    /* 增加该属性，可以增加弹性 */
    -webkit-overflow-scrolling: touch;
}

<body>
    <div class="content">
       <!-- 内容在这里... -->
    </div>   
</body>

将页面分为两部分，导航条tab分类部分为顶部条固定死，没有fixed属性，下部为每个tab标签页的内容区域，占有一屏剩余的页面，写死，不涉及fixed属性，当内容区域的数据过多时，在内容区内部进行滚动，不会有父级超出一屏的时候，就不会有导航条数据消失的现象。

二.微信分享vue项目的H5页面，hash路由模式，苹果机出现第一次进入空白，点击刷新又成功出现页面，考虑到可能是ios系统可能没能正确处理路由#号，导致定位不到index.html唯一入口才会有这种空白页，于是给每个分享链接都加上了index.html 就解决了这个问题

。

三.mint-ui中的时间组件（dateTimePicker）在使用中发现：在IOS端会存在滚动穿透的问题（安卓端貌似没有存在）

滑动时间弹框选择时间，父页面也跟着滚动

解决：

上面一行代码即为消除滚动穿透的关键 @touchmove.native.stop.prevent

想起来的就这三个了，以后遇到和再想起来遇到过的苹果兼容问题再来记录，如果有更好的方法，请留言指教。

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。