移动端开发兼容性问题

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

原创

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

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #移动端 #bug #兼容性

本文记录移动端开发中遇到的兼容性问题，包括ios使用fixed蒙层输入框时的闪烁问题，ios12及以上版本input框收起后页面未恢复，以及手机锁屏后倒计时停止。针对这些问题，提出了使用absolute替代fixed，监听scroll事件动态调整高度，以及在blur时计算scrollTop值来解决ios输入框滚动的方案。对于手机锁屏倒计时，提出在setinterval内获取当前时间的解决思路。

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

移动端开发会让你经常会和测试说这样一些话：“我已经测了的，怎么会是这个样子？”；“我的手机上是正常的呀！”；“会不会是缓存~”；“还有这种操作？？？”…

刚开始不如移动端开发，这个时候才发现设备的兼容性是多么让人头疼，下面会记录一些我遇到的问题。这篇文章会持续不定期更新

我讲的不会很细致，只会讲出我遇到的问题和解决的思路及少量代码

ios使用fixed蒙层输入框

你会惊奇的发现，如果你在有弹框的蒙层用了fixed这种常规操作，很棒~，简单实用。but！ios会出现输入框闪烁的无奈问题，也不用纠结哪个版本的ios了，反正你都得改~。具体我们该怎么解决这个问题呢？用absolute？真好，我们想到了一起。但是要知道absolute并不能锁定整个屏幕，所以我给body设置overflow:hidden，但是这会导致body自动到顶部。实在没想出完美解决这个bug的简单用css就可以的方法。所以我用了js控制。主要是使用了两个函数，

		// 我用的是vue
		// 思路很简单  就是弹框弹起时获取scrollTop 和 屏幕的高度
		// 然后 两者相加为背景高度使用margin-top的负高度上移scrollTop的高度，
		// 最后overflow:hidden;
		// 关闭弹框时恢复设置
		hasMask() {
            this.top = document.documentElement.scrollTop || document.body.scrollTop;
           	const mainDom = document.querySelector('.pig-main');
            this.pageMinHeight = document.querySelector('#app').clientHeight;
            mainDom.style.margin