H5开发常见问题

1.active兼容处理 即伪类 :active 失效
2.圆角bug
3.启动画面，避免加载时的白屏
4.IOS中input键盘事件keyup、keydown、keypress支持不是很好
5.IOS键盘字母输入，默认首字母大写
6.移动端点击300ms延迟
7.移动端点透问题
8.关于 iOS 系统中，中文输入法输入英文时
9.移动端 HTML5 audio autoplay 失效问题

1、active兼容处理 即伪类 :active 失效

方法一：body添加ontouchstart
方法二：js给 document 绑定 touchstart 或 touchend 事件

bar

2、圆角bug

某些Android手机圆角失效
background-clip: padding-box;

3、启动画面

iOS下页面启动加载时显示的画面图片，避免加载时的白屏。可以通过madia来指定不同的大小：

4、 IOS中input键盘事件keyup、keydown、keypress支持不是很好

问题是这样的，用input search做模糊搜索的时候，在键盘里面输入关键词，会通过ajax后台查询，然后返回数据，然后再对返回的数据进行关键词标红。
用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中变红很慢，用输入法输入之后，并未立刻相应keyup事件，只有在通过删除之后才能相应！
解决办法：
可以用html5的oninput事件去代替keyup

然后就达到类似keyup的效果！

5、IOS键盘字母输入，默认首字母大写

解决方案，设置如下属性

6、移动端点击300ms延迟

300ms尚可接受，不过因为300ms产生的问题，我们必须要解决。300ms导致用户体验并不是很好，解决这个问题，我们一般在移动端用tap事件来取代click事件。
推荐两个js，一个是fastclick，一个是tap.js
关于300ms延迟，具体请看。

7、移动端点透问题

案例如下：

点头事件测试
www.xxx.com

div是绝对定位的蒙层,并且z-index高于a。而a标签是页面中的一个链接，我们给div绑定tap事件：

$('#haorooms').on('tap',function(){
  $('#haorooms').hide();
});

我们点击蒙层时 div正常消失，但是当我们在a标签上点击蒙层时，发现a链接被触发，这就是所谓的点透事件。
原因：touchstart 早于 touchend 早于click。 亦即click的触发是有延迟的，这个时间大概在300ms左右，也就是说我们tap触发之后蒙层隐藏， 此时 click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下面的a链接上。
解决：
（1）尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)。
（2）用 fastclick
（3）用preventDefault阻止a标签的click
（4）延迟一定的时间(300ms+)来处理事件（不推荐）

（5）以上一般都能解决，实在不行就换成click事件。

下面介绍一下touchend事件，如下：

$("#haorooms").on("touchend", function (event) {
  event.preventDefault();
});

8、关于 iOS 系统中，中文输入法输入英文时

字母之间可能会出现一个六分之一空格可以通过正则去掉
this.value = this.value.replace(/\u2006/g, '');

9、移动端 HTML5 audio autoplay 失效问题

这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。
解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。
解决代码：

document.addEventListener('touchstart', function () {
  document.getElementsByTagName('audio')[0].play();
  document.getElementsByTagName('audio')[0].pause();
});