移动端开发兼容性问题

本文记录移动端开发中遇到的兼容性问题,包括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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值