移动端h5页面遇到的一些问题以及解决方法

[chenyinkai]

ios上button，input等元素连续点击，页面会上移

事件触发频率过高导致的响应速度跟不上触发频率，需要使用 函数防抖（debounce） 限制函数触发频率

具体使用参考这里

const debounce = (fn, wait = 0) => {
    let inDebounce;
    return function () {
        const context = this;
        const args = arguments;
        clearTimeout(inDebounce);
        inDebounce = setTimeout(() => fn.apply(context, args), wait);
    };
};

移动端滚动穿透

解决方法见这里

移动端出现输入框时，底部内容（fixed定位元素）会被顶到输入框上面去

解决方法： 1.添加事件，点击输入框时，使底部内容消失 2.http://efe.baidu.com/blog/mobile-fixed-layout/

ios会识别长数字为号码

增加 meta

<meta name="format-detection" content="telephone=no">

ios设备无法自动播放音频

监听触摸事件播放

$('html').one('touchstart',function(){
    audio.play()
})

禁止ios和android用户选中文字

-webkit-user-select:none

ios下取消input在输入的时候英文首字母的默认大写

<input type="text" autocapitalize="none">

调用ios或者安卓拨号功能

<a href="tel:10010">10010</a>

上下拉动滚动条时卡顿、慢

ios设置 overflow: scroll; 时滚动卡顿

body {
 -webkit-overflow-scrolling: touch;
 overflow-scrolling: touch;
}

iphone及ipad下输入框默认内阴影

Element{
 -webkit-appearance: none;
}