移动的一些兼容性问题

1.position:fixed;

ios下fixed元素容易定位出错,软键盘弹出时,影响fixed元素定位

android下fixed表现要比iOS更好,软键盘弹出时,不会影响fixed元素定位

ios4下不支持position:fixed

解决方案: 可用iScroll插件解决这个问题

2.安装复制功能的插件,

因为手机版本高低原因,会出现兼容性问题在复制按钮的class上增加 needsclick ,j解决在手机上的兼容问题class="copy needsclick"

3.IOS移动端click事件300ms的延迟相应

移动设备上的web网页是有300ms延迟的,往往会造成按钮点击延迟甚至是点击失效。

这是由于区分单机事件和双击屏幕缩放的  历史原因  造成的。

解决方式:

fastclick可以解决在手机上点击事件的300ms延迟

zepto的touch模块,tap事件也是为了解决在click的延迟问题

触摸屏的相应顺序为touchstart-->touchmove-->touchend-->click,也可以通过绑定ontouchstart事件,加快事件的响应,解决300ms的延迟问题

4.ios的一些情况下对非可点击元素(label,span)监听click事件,iso下不会触发,css增加cursor:pointer就搞定了。

5..h5底部输入框被键盘遮挡问题

h5页面有个很蛋疼的问题就是,当输入框在最底部,点击软键盘后输入框会被遮挡。可采用如下方式解决


var oHeight = $(document).height(); //浏览器当前的高度 $(window).resize(function(){ if($(document).height() < oHeight){ $("#footer").css("position","static"); }else{ $("#footer").css("position","absolute"); } });

6..消除 transition 闪屏

-webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/ -webkit-backface-visibility: hidden; /*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/

7.iOS 系统中文输入法输入英文时,字母之间可能会出现一个六分之一空格

可以通过正则去掉 this.value = this.value.replace(/\u2006/g, '');

8.禁止ios和android用户选中文字

-webkit-user-select:none

9.CSS动画页面闪白,动画卡顿

解决方法: 1.尽可能地使用合成属性transform和opacity来设计CSS3动画,不使用position的left和top来定位 2.开启硬件加速

-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);

10..阻止旋转屏幕时自动调整字体大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

11。Input 的placeholder会出现文本位置偏上的情况

input 的placeholder会出现文本位置偏上的情况:PC端设置line-height等于height能够对齐,而移动端仍然是偏上,解决是设置line-height:normal

12 往返缓存问题

点击浏览器的回退,有时候不会自动执行js,特别是在mobilesafari中。这与往返缓存(bfcache)有关系。

解决方法 :window.onunload = function(){};

13.calc的兼容性处理

CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀,目前的FF浏览器已经无需-moz-前缀。

Android浏览器目前仍然不支持calc,所以要在之前增加一个保守尺寸:

div { width: 95%; width: -webkit-calc(100% - 50px); width: calc(100% - 50px); }


14在移动端修改难看的点击的高亮效果,iOS和安卓下都有效:

* {-webkit-tap-highlight-color:rgba(0,0,0,0);}

15。overflow: auto; IOS手机滚动卡顿

-webkit-overflow-scrolling: touch; //有回弹效果

你可能感兴趣的:(移动的一些兼容性问题)