前端小记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识别长串数字为电话
<meta content="telephone=no" name="format-detection" />
8.不让Android手机识别邮箱
<meta content="email=no" name="format-detection" />
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问题的更多相关文章
- 移动平台前端开发总结(ios,Android)
首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用 <meta content="width=device-width; ...
- javascript开发 ios和android app的简单介绍
先看几个名词解释: nodejs ionic,Cordova,phoneGap,anjularjs react-native,reactjs nodeJs 的介绍参见这里,写的很好http://www ...
- iOS和Android开发异同点(一)
说到移动开发,目前主流平台有谷歌的android os 系统,苹果iOS系统,和微软主打的windows Phone OS 系统,至于目前为啥移动开发中,安卓和iOS比较受欢迎,者要看三家产品的历史由 ...
- select设置text的值选中(兼容ios和Android)基于jquery
前一段时间改了一个bug,是因为select引起的.当时我没有仔细看,只是把bug改完了就完事了,今天来总结一下. 首先说option中我们通常会设置value的属性的,还有就是text值的,请参见下 ...
- JavaScript调用App原生代码(iOS、Android)通用解决方案
实际场景 场景:现在有一个H5活动页面,上面有一个登陆按钮,要求点击登陆按钮以后,唤出App内部的登录界面,当登录成功以后将用户的手机号返回给H5页面,显示出来.这个场景应该算是比较完整的一次H5中的 ...
- web前端开发与iOS终端开发的异同[转]
* {-webkit-tap-highlight-color: rgba(0,0,0,0);}html {-webkit-text-size-adjust: none;}body {font-fami ...
- js如何判断客户端是iOS还是Android等移动终端
判断原理:JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来 ...
- JS判断客户端是否是iOS或者Android或者ipad(三)
* * @function: 判断浏览器类型是否是Safari.Firefox.ie.chrome浏览器 * @return: true或false * */ function isSafa ...
- JS判断客户端是否是iOS或者Android或者ipad(二)
js判断客户端是IPAD和iphone 多了就不说了,直接上代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 funct ...
随机推荐
- PAT天梯赛L3-007 天梯地图
题目链接:点击打开链接 本题要求你实现一个天梯赛专属在线地图,队员输入自己学校所在地和赛场地点后,该地图应该推荐两条路线:一条是最快到达路线:一条是最短距离的路线.题目保证对任意的查询请求,地图上都至 ...
- 学习:数学----gcd及扩展gcd
gcd及扩展gcd可以用来求两个数的最大公因数,扩展gcd甚至可以用来求一次不定方程ax+by=c的解 辗转相除法与gcd 假设有两个数a与b,现在要求a与b的最大公因数,我们可以设 a=b*q+ ...
- 如何顺畅使用sourcetree可视化工具
http://www.360doc.com/content/17/0711/10/11253639_670493403.shtml sourcetree软件下载 下载地址:https://www.so ...
- 基于Jquery的文本提示控件 poshytip
Html中,如设置了title的属性,则当鼠标在该对象上面短暂的停留时,会显示预设的文本提示,但,这些效果只会短暂的显示,一会就会消失,又要重新把鼠标移出再移回来才被显示,样式也无法重写,实在是恼人之 ...
- oracle 容灾库日常维护 ,健康检查脚本 以及常见问题分析
select DEST_ID, APPLIED_SCN FROM v$archive_dest select * from v$dataguard_status; SELECT gvi.thread# ...
- hadoop map 个数 源码分析
本文转自http://ronxin999.blog.163.com/blog/static/42217920201279112163/
- 如何在Eclipse中正确安装Jetty插件并初步使用(图文详解)
不多说,直接上干货! 最近在做一个Storm项目,需要用到Jetty来进行展示.它类似于Tomcat. 一.eclipse中jetty插件安装 打开eclipse,依次点击菜单Help->Ecl ...
- pat1078. Hashing (25)
1078. Hashing (25) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue The task of t ...
- ACdream 1431——Sum vs Product——————【dfs+剪枝】
Sum vs Product Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) S ...
- Android图表库XCL-Charts
首先,这个是国人开发的,支持下必须顶!github项目地址:点击打开,由于项目的基本功能已经实现,所以项目作者也说以后基本不会在有更新了. 项目简介: Android图表库(XCL-Charts is ...