微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

移动端开发ios和安卓兼容问题

移动端开发ios和安卓兼容问题

最近做移动端混合开的时候遇到一些安卓和iOS的兼容性问题,兼容想问题不仅在浏览器存在也在APP开发当中也会经常遇到这样的情况。

最近看了一下内容很不错的移动端开发相关的资料,自己总结出来了一些安卓和iOS兼容的知识点:

一、搜索确定问题

添加form元素,在提交的时候是input失去焦点

二、时间框选择问题

添加form元素

三、多图上传问题

安卓上不能多图上传,无法解决

四、浮动问题

尽量用盒子模型布局

五、音频自动播放问题,ios认不自动播放

在document上添加点击事件播放音频

六、浮动高度撑开盒子

.clearfix:after{

content:".";

display:block;

height:0;

clear:both;

visibility:hidden;

}

.clearfix{

display:inline-block;

}

* html .clearfix{

height:1%;

}

.clearfix{

display:block;

}

.clear{

clear:both;

height:0;

font:0/0 Arial;

visibility:hidden;

}

 

七、 Css在ios中动画闪屏问题

IOS下Safari渲染Transition时页面闪动Bug

http://classjs.com/category/technology/css/

 

环境:IOS的Safari环境

问题:在做移动端左右滑动的时候,用到了CSS3的Transition属性来进行动画变换,结果每次渲染Transition属性时,出现闪屏现象

有一下两种解决办法,

方法一:

1-webkit-transform-style: preserve-3d;

2/*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/

方法二:

view source print?

1-webkit-backface-visibility: hidden;

2/*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/

 

八、单屏网页滑动问题

添加

$( document ).on("touchmove",function(e){

e.stopPropagation();

return false;

})

九、键盘弹出问题

解决办法:无,安卓键盘弹出整个页面的window层的高度减小,ios无影响;

十:伪类active失效

要CSS伪类 :active 生效,只需要给 document 绑定 touchstart 或 touchend 事件

 

使用css3动画用了transition或者animation后会有闪白的现象

-webkit-backface-visibility: hidden;

尽量写成3d使页面运行更流畅

-webkit-transform-style: preserve-3d;

 

ios横屏时会重置字体大小

text-size-adjust:none 

手机上最好是用tap事件  click事件会有300ms的延迟

禁止ios弹出各种操作窗口

-webkit-touch-callout:none

禁止用户中文

-webkit-user-select:none

js动态生成的下拉菜单在安卓2.0中不起作用

解决方法删除了overflow-x:hidden;然后在js生成下拉菜单之后聚焦focus

消除 IE10 里面的那个叉号

input:-ms-clear{display:none;}

 

ios中文输入法输入英文时会有小空格  解决办法  用正则this.value = this.value.replace(/\u2006/g, '');

 

三星I9100 (Android 4.0.4)不支持display:-webkit-flex这种写法的弹性布局,

支持display:-webkit-Box这种写法的布局,

相关的属性也要相应修改,如-webkit-Box-pack: center;

移动端采用弹性布局时,建议直接写display:-webkit-Box系列的布局

 

touchmove事件在Android部分机型(如LG Nexus 5 android4.4,小米2 android 4.1.1)上只会触发一次

解决方案是在触发函数里面加上e.preventDefault(); 记得将e也传进去。

 

图片圆角是显示不正常   在图片外面包裹 一个元素  然后给那个元素设置圆角  让图片变成这个元素的背景图片

在android4.2背景会溢出,使用background-clip:padding-Box;

 

ios不会弹出键盘 必须满足下面几点

① 文本框获取焦点

② 手指触屏(网页区域,混合开发触屏app头不能让webview弹出键盘

③ 没有延迟(不会ajax回调,不会延迟)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐