## 1. H5 兼容性问题 H5 在 Android 机型和 IOS 机型或者同一机型的不同浏览器中会有不同的表现，因此需要解决相应的兼容性问题 ## 2. IOS 常见兼容性问题 ### 1. IOS side兼容输入光标的高度-问题症状：在安卓手机上input输入框的光标显示没有任何问题，但在苹果手机上点击输入时，光标的高度是一样的作为父包的高度- 原因分析：通常我们习惯使用height属性来设置行与行之间的高度，使用line-height属性来设置行与行之间的距离（行高）。 点击输入时，手动将光标高度与父包的高度相同。 （谷歌浏览器的设计原理css3上下滑动，另一种可能是，当没有内容时，光标的高度等于输入框的line-height的值。当有内容时，光标从输入框的顶部移动到文字顶部） - 解决方案：高度和行高内容用padding扩展### 2、IOS按钮唤醒，键盘缩回后页面没有回到原来位置 - 问题症状：输入内容，软键盘弹出，页面内容整体上移，但是按钮缩回 从一开始，页面内容就没有下降 - 原因分析：固定位置元素在输入框聚焦时的元素，弹出的软键盘占据位置。 焦点时给个暴风雨——解决办法：```changeBlur() {let u = navigator.userAgent, app = navigator.appVersion;let isIOS = !!u.match(/(i[^;]+; ( U; )? CPU.+Mac OS X/);if(isIOS){setTimeout(() => {const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0window.scrollTo(0, Math .max( scrollHeight - 1, 0))}, 200)}}```- 拓展知识：position:固定元素在IOS中，当按钮收起来的时候，会被往上推，尤其是第三方按钮### 3、IOS端h5页面上下滑动时，页面卡顿，页面缺失 - 问题描述：IOS端，上下滑动页面时，如果页面高度超过一屏，就会出现会明显卡顿，并且页面有部分内容显示不全 - 解决方案：只需在公共样式中添加如下一行代码```* { -webkit-overflow-scrolling: touch;}``` **扩展知识：什么是-webkit-overflow-scrolling? **-webkit-overflow-scrolling 属性控制元素是否在联通设备上使用滚动反弹效果。
auto：使用正常滚动css3上下滑动，中指离开触摸屏时滚动将立即停止。
触摸：使用带反弹效果的滚动，中指离开触摸屏，内容会继续保持滚动效果一段时间。 继续滚动的速率和持续时间与滚动手势的强度成正比。 它还创建一个新的堆栈上下文。 ### 4、IOS移动点击事件延迟响应300ms - 问题描述：移动设备上的网页存在300ms的延迟，经常会导致点击延迟甚至无效。 解决方案： - fastclick可以解决问题 手机上点击风波延迟300ms - zepto的触摸模块，点击风波也是为了解决点击延迟的问题 - 触摸风波的响应顺序是touchstart --> touchmove -- > touchend --> click，也可以通过绑定ontouchstart风暴来加快风暴响应速度并解决300ms延迟问题### 5.IOS严禁双击页面缩放-问题描述：内置-在IOS10中Safari浏览器无法识别meta viewport-IOS10解决移动端禁止页面缩放方式：``````-IOS10解决方案：####（1）禁用两指缩放```文档.documentElement.addEventListener('touchstart', function (event) { if (event.touches.length > 1) {event.preventDefault(); }}, false);```#### (2) 禁用中指双击缩放```var lastTouchEnd = 0;document.documentElement.addEventListener('touchend', function (event) { var now = Date.now(); if (now - lastTouchEnd
