移动端开发会让你经常会和测试说这样一些话:“我已经测了的,怎么会是这个样子?”;“我的手机上是正常的呀!”;“会不会是缓存~”;“还有这种操作???”…
刚开始不如移动端开发,这个时候才发现设备的兼容性是多么让人头疼,下面会记录一些我遇到的问题。这篇文章会持续不定期更新
我讲的不会很细致,只会讲出我遇到的问题和解决的思路及少量代码
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