ios和android适配问题总结 - sandisen(2)_H5之家 - 中国HTML5教程资源分享第一站

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);

fixed定位缺陷

ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位 android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位 ios4下不支持position:fixed 解决方案：可用iScroll插件解决这个问题

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

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

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

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

往返缓存问题

点击浏览器的回退，有时候不会自动执行js，特别是在mobile safari中。这与*往返缓存(bfcache)*有关系。解决方法：window.onunload = function(){};

calc的兼容性处理

CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。 Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸： div { width: 95%; width: -webkit-calc(100% - 50px); width: calc(100% - 50px); }

iOS6下伪类:hover
除了<a>之外的元素无效；在Android下则有效。类似 div#topFloatBar_l:hover #topFloatBar_menu { display:block; } 这样的导航显示在iOS6点击没有点击效果，只能通过增加点击侦听器给元素增减class来控制子元素。

在移动端修改难看的点击的高亮效果，iOS和安卓下都有效：
*{-webkit-tap-highlight-color:rgba(0,0,0,0);} 不过这个方法在现在的安卓浏览器下，只能去掉那个橙色的背景色，点击产生的高亮边框还是没有去掉，有待解决！

一个CSS3的属性，加上后，所关联的元素的事件监听都会失效，等于让元素变得“看得见，点不着”。IE到11才开始支持，其他浏览器的当前版本基本都支持。

pointer-events: none; 详细介绍见这里：https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

Zepto点透的解决方案

zepto的tap是通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的,在点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发，而在冒泡到document之前，用户手的接触屏幕(touchstart)和离开屏幕(touchend)是会触发click事件的,因为click事件有延迟触发(这就是为什么移动端不用click而用tap的原因)(大概是300ms,为了实现safari的双击事件的设计)，所以在执行完tap事件之后，弹出来的选择组件马上就隐藏了，此时click事件还在延迟的300ms之中，当300ms到来的时候，click到的其实不是完成而是**隐藏之后的下方的元素，如果正下方的元素绑定的有click事件此时便会触发，如果没有绑定click事件的话就当没click，但是正下方的是input输入框(或者select选择框或者单选复选框)，点击默认聚焦而弹出输入键盘，也就出现了上面的点透现象。 //(1)引入fastclick.js，在页面中加入如下js代码 window.addEventListener( "load", function() { FastClick.attach( document.body ); }, false ); //(2)或者有zepto或者jQuery的js里面加上 $(function() { FastClick.attach(document.body); }); //(3)当然require的话就这样： var FastClick = require('fastclick'); FastClick.attach(document.body, options); //(4)用touchend代替tap事件并阻止掉touchend的默认行为preventDefault() $("#cbFinish").on("touchend", function (event) { //很多处理比如隐藏什么的 event.preventDefault(); }); //(5)延迟一定的时间(300ms+)来处理事件 $("#cbFinish").on("tap", function (event) { setTimeout(function(){ //很多处理比如隐藏什么的 },320); });

图片加载
若您遇到图片加载很慢的问题，对这种情况，手机开发一般用canvas方法加载：
具体的canvas API 参见：

下面举例说明一个canvas的例子： <li><canvas></canvas></li> js动态加载图片和li 总共举例17张图片！ vartotal=17; varzWin=$(window); varrender=function(){ varpadding=2; varwinWidth=zWin.width(); varpicWidth=Math.floor((winWidth-padding*3)/4); vartmpl =''; for(vari=1;i<=totla;i++){ varp=padding; varimgSrc='img/'+i+'.jpg'; if(i%4==1){ p=0; } tmpl +='<li><canvas></canvas></li>'; varimageObj = newImage(); imageObj.index = i; imageObj.onload = function(){ varcvs =$('#cvs_'+this.index)[0].getContext('2d'); cvs.width = this.width; cvs.height=this.height; cvs.drawImage(this,0,0); } imageObj.src=imgSrc; } } render();

防止手机中网页放大和缩小

apple-mobile-web-app-capable

apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行。语法：<metacontent="yes"> 说明：如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。 content的默认值是no，表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。

html5调用安卓或者ios的拨号功能

html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。如下： <ahref="tel:4008106999,1034">400-810-6999 转 1034</a> 拨打手机直接如下: <a href="tel:15677776767">点击拨打15677776767</a>

html5GPS定位功能具体请看：

上下拉动滚动条时卡顿、慢

body { -webkit-overflow-scrolling:touch; overflow-scrolling: touch; } Android3+和iOS5+支持CSS3的新属性为overflow-scrolling

禁止复制、选中文本

Element {-webkit-user-select:none; -moz-user-select:none; -khtml-user-select:none; user-select:none; }

iphone及ipad下输入框默认内阴影

Element{ -webkit-appearance:none; }