移动端开发会让你经常会和测试说这样一些话：“我已经测了的，怎么会是这个样子？”；“我的手机上是正常的呀！”；“会不会是缓存~”；“还有这种操作？？？”…
刚开始不如移动端开发，这个时候才发现设备的兼容性是多么让人头疼，下面会记录一些我遇到的问题。这篇文章会持续不定期更新
我讲的不会很细致，只会讲出我遇到的问题和解决的思路及少量代码
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.marginTop = -this.top + 'px';mainDom.style.height = this.pageMinHeight + this.top - 1 + 'px';mainDom.style.overflow = 'hidden';},noMask() {const mainDom = document.querySelector('.pig-main');mainDom.style.marginTop = 0;mainDom.style.height = '';mainDom.style.overflow = '';document.documentElement.scrollTop = this.top;document.body.scrollTop = this.top;}
然而这种方式在ios下也有一个bug，ios的title处会动态的小幅度变化，导致蒙层可滑动并且下方会有小部分空白。此时我选择监听scroll事件，动态改变高度。（ps: 弹框关闭时建议移除scroll事件）
changeHeight() {const mainDom = document.querySelector('.pig-main');this.pageMinHeight = document.querySelector('#app').clientHeight;mainDom.style.marginTop = -this.top + 'px';mainDom.style.height = this.pageMinHeight + this.top - 1 + 'px';mainDom.style.overflow = 'hidden';},hasMask() {this.top = document.documentElement.scrollTop || document.body.scrollTop;this.changeHeight();window.addEventListener('scroll', this.changeHeight)},noMask() {const mainDom = document.querySelector('.pig-main');window.removeEventListener('scroll', this.changeHeight)mainDom.style.marginTop = 0;mainDom.style.height = '';mainDom.style.overflow = '';document.documentElement.scrollTop = this.top;document.body.scrollTop = this.top; },
这个bug目前算是解决了，代码写的不好还见谅，我也会努力向大家学习。大家有更好的方法也可以推荐给我。
目前ios12及以上版本input框换起软盘后收起，页面没有恢复
这个bug解决的思路很简单：首先，未恢复的页面在发生scroll事件时就会恢复；接下来就是解决何时发生滚动，我采用的是在blur时scrollTo;最开始如果我们scrollTo(0, 0),就会出现一个新的bug就是你每切换一个输入框都会往上弹一下，用户体验会很差；所以就在blur时计算此时的scrollTop值；然后加1px。:)最后因为ios切换输入框滚动有个延时，所以最后代码如下：
if (/os 12/ig.test(navigator.userAgent)) {window.addEventListener('blur', () => {let currentTop;setTimeout(() => {currentTop = document.documentElement.scrollTop || document.body.scrollTop;currentTop += 1; window.scrollTo(0,currentTop);},300);},true)}
手机锁屏倒计时停止
手机锁屏的解决方案如果不是webview的页面，用网上的监听页面事件的解决方案是不好解决的，get到一个简单方法就是在setinterval里获取当前时间，如下：
const timer = setInterval(function () {timeleft = parseInt((finishTime - new Date().getTime()) / 1000) // 重复获取时间min = Math.floor(timeleft / 60);sec = Math.floor(timeleft % 60);min = min < 10 ? "0" + min : min;sec = sec < 10 ? "0" + sec : sec;self.timeLeftShow = `${min}:${sec}`;timeleft--;if (timeleft <= 0) {self.canPay = false;clearInterval(timer);}}, 1000);
如果觉得《移动端开发兼容性问题》对你有帮助，请点赞、收藏，并留下你的观点哦！
