前端小记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识别长串数字为电话

8.不让Android手机识别邮箱

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

巴特西

前端小记3——iOS与Android问题

最新文章

热门文章