移动端坑,兼容性问题

这里写目录标题

    • 获取机型 uni.getSystemInfo
    • 上下拉动滚动条时卡顿、慢 overflow-scrolling:touch;
    • 长时间按住页面出现闪退 -webkit-touch-callout:none;
    • iphone 及 ipad 下输入框默认内阴影 -webkit-appearance:none;
    • 1px 像素使用伪类元素模拟边框,使用 transform 缩放
    • click 的 300ms 延迟问题 fastclick库解决
    • ios键盘唤起,键盘收起后页面不归位 在失去焦点的时候给一个事件
    • h5底部输入框被键盘遮挡问题 document.body.scrollTop = document.body.scrollHeight
    • iOS 系统中文输入法输入英文时,字母之间可能会出现一个六分之一空格可以通过正则去掉

获取机型 uni.getSystemInfo

原生 :navigator.userAgent
uniapp;	uni.getSystemInfo({success(res) {console.log(res.brand) //手机牌子console.log(res.model) //手机型号console.log(res.screenWidth) //屏幕宽度console.log(res.screenHeight) //屏幕高度}}); 

上下拉动滚动条时卡顿、慢 overflow-scrolling:touch;

长时间按住页面出现闪退 -webkit-touch-callout:none;

iphone 及 ipad 下输入框默认内阴影 -webkit-appearance:none;

1px 像素使用伪类元素模拟边框,使用 transform 缩放

click 的 300ms 延迟问题 fastclick库解决

在document.body 上绑定 touchstart 和 touchend
其中,touchstart 用于记录当前点击元素的targetElement。
touchend 阻止默认事件,通过DOM自定义事件模拟一个click事件

ios键盘唤起,键盘收起后页面不归位 在失去焦点的时候给一个事件

h5底部输入框被键盘遮挡问题 document.body.scrollTop = document.body.scrollHeight

const ua = navigator.userAgent;
const iOS = /iPad|iPhone|iPod/.test(ua);
const input = document.querySelector('#input');input.addEventListener('focus', () => {setTimeout(() => {if (iOS) {if (!/OS 11_[0-3]\D/.test(ua)) {document.body.scrollTop = document.body.scrollHeight;   }} else {input.scrollIntoView(false);}}, 300);
});

iOS 系统中文输入法输入英文时,字母之间可能会出现一个六分之一空格可以通过正则去掉

this.value = this.value.replace(/\u2006/g, '');