移动端开发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回调,不会延迟)
移动端开发ios和安卓兼容问题的更多相关文章
- 移动端底部fixed固定定位输入框ios下不兼容
简短记录下最近开发移动端项目碰到的小坑,产品需求做一个售后对话页面,底部固定输入框,和微信对话差不多,但是在ios下,fixed失效,输入框被虚拟键盘挡住,在安卓下是正常的. 尝试过网上说的很多方法, ...
- 年过三十,我为什么要学习ios 与安卓App 移动端技术
今天跟我华为的同学谈了一些技术/人生方面的感悟,感觉自己的人生目标及后面的工作/生活有了一个比较清晰的认识与规划. 首先我谈了一下我为什么要学习ios与安卓技术,我其实不想通过这二门技术来提升我的薪酬 ...
- 职业定位(移动端、ios开发、Android开发)
移动端 移动端webapp开发必备知识:http://www.chinaz.com/manage/2012/1128/283974.shtml 设计一款好的移动App,有哪些基本规则?http://w ...
- html2canvas截屏在H5微信移动端踩坑,ios和安卓均可显示
1.最近在做移动端开发,框架是vue,一产品需求是,后台返回数据,通过qrcode.js(代码比较简单,百度上已经很多了)生成二维码,然后通过html2canvas,将html元素转化为canvas, ...
- Swift3.0服务端开发(一) 完整示例概述及Perfect环境搭建与配置(服务端+iOS端)
本篇博客算是一个开头,接下来会持续更新使用Swift3.0开发服务端相关的博客.当然,我们使用目前使用Swift开发服务端较为成熟的框架Perfect来实现.Perfect框架是加拿大一个创业团队开发 ...
- Swift3.0服务端开发(五) 记事本的开发(iOS端+服务端)
前边以及陆陆续续的介绍了使用Swift3.0开发的服务端应用程序的Perfect框架.本篇博客就做一个阶段性的总结,做一个完整的实例,其实这个实例在<Swift3.0服务端开发(一)>这篇 ...
- ionic3开发ios端
ionic框架是一端开发,三端适用(android端,ios端,web端),意思是在其中一端开发的代码,拿到另外两端,代码同样生效 那现在就说一下在web端开发拿到ios端开发前需要做的事情 开发io ...
- 移动端开发(一. Viewport(视窗))
手机与浏览器 移动端开发主要针对手机,ipad等移动设备,随着地铁里的低头族越来越多,移动端开发在前端的开发任务中站的比重也越来越大.各种品牌及尺寸的手机也不尽相同.尺寸不同就算了分辨率,视网膜屏 ...
- php后台对接ios,安卓,API接口设计和实践完全攻略,涨薪必备技能
2016年12月29日13:45:27 关于接口设计要说的东西很多,可能写一个系列都可以,vsd图都得画很多张,但是由于个人时间和精力有限,所有有些东西后面再补充 说道接口设计第一反应就是r ...
随机推荐
- 【原创】查询占CPU高的oracle进程
1:首先使用TOP命令传到占用CPU高的SPID号 PID USERNAME THR PRI NICE SIZE RES STATE TIME CPU COMMAND3575 oracle 1 12 ...
- JDOM,dom4j方式解析XML
<?xml version="1.0" encoding="UTF-8"?> <dataSources> <!-- 定义MySQL ...
- 带参数,头信息,代理,cookie爬取
1.get传参 (1)汉字报错 :解释器器ascii没有汉字 url汉字转码 urllib.parse.quote safe="string.printtable" (2)字典传参 ...
- 洛谷P3567 [POI2014]KUR-Couriers 主席树
挺裸的,没啥可讲的. 不带修改的主席树裸题 Code: #include<cstdio> #include<algorithm> using namespace std; co ...
- iOS开发——heightForHeaderInSection设置高度无效
iOS11之后,tableView设置section高度失效,解决方法有两种: 1.iOS11默认开启Self-Sizing,关闭Self-Sizing即可.在初始化tableview的地方加上下面的 ...
- LCT笔记
先存个代码 #include<iostream> #include<cstring> #include<cstdio> #include<cmath> ...
- LightOJ-1220 Mysterious Bacteria 唯一分解定理 带条件的最大公因数
题目链接:https://cn.vjudge.net/problem/LightOJ-1220 题意 给x=y^p,问p最大多少 注意x可能负数 思路 唯一分解定理,求各素因数指数的GCD 注意负数的 ...
- windows下matlab代码到ubuntu下中文注释出现乱码
转自:https://blog.csdn.net/kouyi5627/article/details/81513329 环境:Ubuntu18.04,Matlab R2017b. 把matlab文件从 ...
- Linux 操作基础(一) -- Shell 命令格式和元字符
1 命令格式 cmd [-选项] [参数] 说明: • 最简单的Shell命令只有命令名,复杂的Shell命令可以有多个选项和参数 • 参数是文件也可以是目录,有些命令必须使用多个操作对象 • 并非所 ...
- jQuery第四课 点击 _选项卡效果一
//鼠标移到上面是显示手型cursor:pointer jquery 的函数: siblings //兄弟节点,同胞元素 :eq()选择器选取带有指定 index 值的元素.index 值从 0 开始 ...