移动端兼容

iphone篇：

属性兼容：

1. overflow-scrolling：属性控制元素在移动设备上是否使用滚动回弹效果.
   值为auto：当手指从触摸屏上移开，滚动会立即停止
   值为touch：当手指从触摸屏上移开，会保持一段时间的滚动

当内容需要滚动时使用，不使用会出现滚动不顺畅的感觉

2. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

绑定click事件的区块会出现闪一下的情况，加上此属性可以解决

3. backdrop-filter: blur(10px)

iphone独有模糊效果

4. input事件在iphone输入框中输入中文词组时会多次触发，而不是触发一次
   eg：‘中文’应该只触发一次input事件，但在iphone下会解析为每输入一个字母就触发一次input事件

解决办法：引入compositionstart和compositionend事件一起处理

非直接输入：我们想键入‘中文’两字，输入拼音zhongwen，在你没有点选或点击选定按钮前，都为非直接输入

// 设置一个变量判断用户是否为非直接输入，如果为直接输入直接处理逻辑
var inputLock = false;

function fn () {
    // do something
}

el.addEventListener('compositionstart', function () {
    inputLock = true;  
}, false);

// compositionend事件会在input后触发一次，所以要把处理逻辑在该事件中也调用一次
el.addEventListener('compositionend', function () {
    inputLock = false;  
    fn();
}, false);

el.addEventListener('input', function () {
    if (!inputLock) {
        fn();
   }
}, false);