移动端开发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回调,不会延迟)

移动端开发ios和安卓兼容问题的更多相关文章

  1. 移动端底部fixed固定定位输入框ios下不兼容

    简短记录下最近开发移动端项目碰到的小坑,产品需求做一个售后对话页面,底部固定输入框,和微信对话差不多,但是在ios下,fixed失效,输入框被虚拟键盘挡住,在安卓下是正常的. 尝试过网上说的很多方法, ...

  2. 年过三十,我为什么要学习ios 与安卓App 移动端技术

    今天跟我华为的同学谈了一些技术/人生方面的感悟,感觉自己的人生目标及后面的工作/生活有了一个比较清晰的认识与规划. 首先我谈了一下我为什么要学习ios与安卓技术,我其实不想通过这二门技术来提升我的薪酬 ...

  3. 职业定位(移动端、ios开发、Android开发)

    移动端 移动端webapp开发必备知识:http://www.chinaz.com/manage/2012/1128/283974.shtml 设计一款好的移动App,有哪些基本规则?http://w ...

  4. html2canvas截屏在H5微信移动端踩坑,ios和安卓均可显示

    1.最近在做移动端开发,框架是vue,一产品需求是,后台返回数据,通过qrcode.js(代码比较简单,百度上已经很多了)生成二维码,然后通过html2canvas,将html元素转化为canvas, ...

  5. Swift3.0服务端开发(一) 完整示例概述及Perfect环境搭建与配置(服务端+iOS端)

    本篇博客算是一个开头,接下来会持续更新使用Swift3.0开发服务端相关的博客.当然,我们使用目前使用Swift开发服务端较为成熟的框架Perfect来实现.Perfect框架是加拿大一个创业团队开发 ...

  6. Swift3.0服务端开发(五) 记事本的开发(iOS端+服务端)

    前边以及陆陆续续的介绍了使用Swift3.0开发的服务端应用程序的Perfect框架.本篇博客就做一个阶段性的总结,做一个完整的实例,其实这个实例在<Swift3.0服务端开发(一)>这篇 ...

  7. ionic3开发ios端

    ionic框架是一端开发,三端适用(android端,ios端,web端),意思是在其中一端开发的代码,拿到另外两端,代码同样生效 那现在就说一下在web端开发拿到ios端开发前需要做的事情 开发io ...

  8. 移动端开发(一. Viewport(视窗))

    手机与浏览器 移动端开发主要针对手机,ipad等移动设备,随着地铁里的低头族越来越多,移动端开发在前端的开发任务中站的比重也越来越大.各种品牌及尺寸的手机也不尽相同.尺寸不同就算了分辨率,视网膜屏  ...

  9. php后台对接ios,安卓,API接口设计和实践完全攻略,涨薪必备技能

    2016年12月29日13:45:27    关于接口设计要说的东西很多,可能写一个系列都可以,vsd图都得画很多张,但是由于个人时间和精力有限,所有有些东西后面再补充   说道接口设计第一反应就是r ...

随机推荐

  1. 【原创】查询占CPU高的oracle进程

    1:首先使用TOP命令传到占用CPU高的SPID号 PID USERNAME THR PRI NICE SIZE RES STATE TIME CPU COMMAND3575 oracle 1 12 ...

  2. JDOM,dom4j方式解析XML

    <?xml version="1.0" encoding="UTF-8"?> <dataSources> <!-- 定义MySQL ...

  3. 带参数,头信息,代理,cookie爬取

    1.get传参 (1)汉字报错 :解释器器ascii没有汉字 url汉字转码 urllib.parse.quote safe="string.printtable" (2)字典传参 ...

  4. 洛谷P3567 [POI2014]KUR-Couriers 主席树

    挺裸的,没啥可讲的. 不带修改的主席树裸题 Code: #include<cstdio> #include<algorithm> using namespace std; co ...

  5. iOS开发——heightForHeaderInSection设置高度无效

    iOS11之后,tableView设置section高度失效,解决方法有两种: 1.iOS11默认开启Self-Sizing,关闭Self-Sizing即可.在初始化tableview的地方加上下面的 ...

  6. LCT笔记

    先存个代码 #include<iostream> #include<cstring> #include<cstdio> #include<cmath> ...

  7. LightOJ-1220 Mysterious Bacteria 唯一分解定理 带条件的最大公因数

    题目链接:https://cn.vjudge.net/problem/LightOJ-1220 题意 给x=y^p,问p最大多少 注意x可能负数 思路 唯一分解定理,求各素因数指数的GCD 注意负数的 ...

  8. windows下matlab代码到ubuntu下中文注释出现乱码

    转自:https://blog.csdn.net/kouyi5627/article/details/81513329 环境:Ubuntu18.04,Matlab R2017b. 把matlab文件从 ...

  9. Linux 操作基础(一) -- Shell 命令格式和元字符

    1 命令格式 cmd [-选项] [参数] 说明: • 最简单的Shell命令只有命令名,复杂的Shell命令可以有多个选项和参数 • 参数是文件也可以是目录,有些命令必须使用多个操作对象 • 并非所 ...

  10. jQuery第四课 点击 _选项卡效果一

    //鼠标移到上面是显示手型cursor:pointer jquery 的函数: siblings //兄弟节点,同胞元素 :eq()选择器选取带有指定 index 值的元素.index 值从 0 开始 ...