前端小记3——iOS与Android问题
1.消除transition闪屏
（1）-webkit-transform-style:preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
（2）-webkit-backface-visibility:hidden; /*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/
2.伪类:active生效
要CSS伪类 :active 生效，只需要给 document 绑定 touchstart 或 touchend 事件
document.addEventListener('touchstart',function(){},false);3.消除IE10里面叉号
input:-ms-clear{display:none;}
4.关于iOS和OS X端字体优化
横竖屏会出现字体加粗不一致等， iOS 浏览器横屏时会重置字体大小，设置text-size-adjust:none;可解决iOS上问题，但桌面版Safari 的字体缩放功能会失效。
最佳解决方案：text-size-adjust:100%；
-webkit-text-size-adjust: 100%；
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
5.iOS点击慢300ms问题
click 事件普遍 300ms 的延迟 在手机上绑定 click 事件，会使得操作有 300ms 的延迟，体验并不是很好。 开发者大多数会使用封装的 tap 事件来代替 click 事件，所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。
6.CSS3动画
使用CSS3动画尽量利用3D加速，从而使得动画变得流畅。动画过程中的动画闪白可以通过backface-visibility隐藏。
-webkit-transform-style: preserve-3d;
-webkit-backface-visiility:hidden;
7.禁止iOS识别长串数字为电话
<meta content=”telephone=no” name=”format-detection” />
8.不让Android手机识别邮箱
<meta content=”email=no” name=”format-detection” />
9.禁止iOS弹出各种操作窗口
-webkit-touch-callout:none;
10.禁止用户选中文字
-webkit-user-select:none;
11.动画效果中使用translate比定位性能高
参考：https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
12.获取滚动条
window.scrollY
window.scrollX
13.绑定touchmove
$('div').on('touchmove', function(){ //.….code });
而code要处理较多东西，使用setTimeout会快很多。
$('div').on('touchmove', function(){
setTimeout(function(){
//.….code
},0);
});14.iOS中，中文输入法输入英文时，字母间可能会出现六分之一的空格
可同正则去掉：
this.value = this.value.replace(/\u2006/g, ”);
15.Android web视图，例如在 HTC EVO 和三星的 Galaxy Nexus 中，文本输入框在输入时表现的就像占位符。情况为一个类似水印的东西在用户输入区域，一旦用户开始输入便会消失(见图片)。
解决方案：
-webkit-user-modify: read-write-plaintext-only