手机H5开发遇到的坑

 手机h5与原生混合的app,出现了一些奇葩的事情，在这里与大家分享一下解决方案。

问题1​：手机不支持:active伪类，这个问题刚开始用的是andriod测试过没有问题，后来用Ios手机测试时发现失效了，瞬间感觉整个人都不好了，经过不断的努力，还真找到了解决方案，关键就是给body元素添加一个绑定事件touchstart，具体代码如下：<</span>body ontouchstart="">你的地盘...</</span>body>，注意等号后写空字符串就可以了，轻松搞定问题。​

​问题2：手机上的可点击位置会在点击时出现灰色背景，去掉这个灰色背景就可以使用这个​-webkit-tap-highlight-color: transparent ;，当然这个还有别的值，你可以设置一个点击时的颜色，使用十六进制，rgb,rgba都可以。

问题3：​手机上禁止用户复制，-webkit-user-select:none;

问题4：手机上实现文字的渐变透明，是不是感觉很高级，我们通过设置遮罩层来达到效果，注意遮罩层的颜色是渐变的，-webkit-mask: -webkit-gradient(linear,0% 0%,0% 100%,from(rgba(222,187,71,0.8)),to(rgba(36,142,36,0.2)));

问题5：手机上有些样式失效​，例如日历控件type="date"，这个控件可以掉漆手机自带的键盘，不过样式不管用外联，行内，内部样式都不起作用，奇葩吧。。。，来看看解决方案吧，-webit-appearance:none;

推荐大家看看这个链接https://www.qianduan.net/the-future-of-css-experimental-css-properties/，里面记录了好多手机上有用的样式