ios和android适配问题总结

_________________________________________________________________________________

相关知识点

移动端、 适配（兼容）、 ios点击事件300ms延迟、 点击穿透、 定位失效......

问题&解决方案

• 手机浏览器独有的三个事件？

onTouchmove，ontouchend，ontouchstart，ontouchcancel

• 为何要用Zepto?

jquery适用于PC端桌面环境，桌面环境更加复杂，jquery须要考虑的因素很是多，尤为表如今兼容性上面，相对于PC端，移动端的发杂都远不及PC端,手机上的带宽永远比不上pc端。pc端下载jquery到本地只须要1~3秒（90+K），可是移动端就慢了不少，2G网络下你会看到一大片空白网页在加载，相信用户第二次就没打开的欲望了。zepto解决了这个问题，只有不到10K的大小，2G网络环境下也毫无压力，表现不逊色于jquery。因此移动端开发首选框架，我的推荐zepto.js。

• IOS移动端click事件300ms的延迟响应

移动设备上的web网页是有300ms延迟的，玩玩会形成按钮点击延迟甚至是点击失效。这是因为区分单击事件和双击屏幕缩放的历史缘由形成的,
2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展现在手机端上，使用了双击缩放(double tap to zoom)的方案，好比你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然能够撑满整个屏幕，可是字体、图片都很小看不清，此时能够快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。
双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。
缘由就出在浏览器须要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转连接<a href="#"></a>，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击连接仍是要双击该部分区域进行缩放操做，因此，捕获第一次单击后，浏览器会先Hold一段时间t，若是在t时间区间里用户未进行下一次点击，则浏览器会作单击跳转连接的处理，若是t时间里用户进行了第二次单击操做，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操做。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。形成的后果用户纯粹单击页面，页面须要过一段时间才响应，给用户慢体验感受，对于web开发者来讲是，页面js捕获click事件的回调函数处理，须要300ms后才生效，也就间接致使影响其余业务逻辑的处理。
解决方案：
fastclick能够解决在手机上点击事件的300ms延迟
zepto的touch模块，tap事件也是为了解决在click的延迟问题
触摸事件的响应顺序为 touchstart --> touchmove --> touchend --> click,也能够经过绑定ontouchstart事件，加快对事件的响应，解决300ms延迟问题

• 一些状况下对非可点击元素如(label,span)监听click事件，ios下不会触发

解决方案：css增长cursor:pointer;

• 三星手机遮罩层下的input、select、a等元素能够被点击和focus(点击穿透)

问题发现于三星手机，这个在特定需求下才会有，所以若是没有相似问题的能够不看。首先需求是浮层操做，在三星上被遮罩的元素依然能够获取focus、click、change)，有两种解决方案：
1.是经过层显示之后加入对应的class名控制，截断显示层下方可获取焦点元素的事件获取
2.是经过将可获取焦点元素加入的disabled属性，也能够利用属性加dom锁定的方式（disabled的一种变换方式）

• 安卓浏览器看背景图片，有些设备会模糊。

//用同等比例的图片在PC机上很清楚，可是手机上很模糊，缘由是什么呢？
通过研究，是devicePixelRatio做怪，由于手机分辨率过小，若是按照分辨率来显示网页，这样字会很是小，因此苹果当初就把iPhone 4的960*640分辨率，在网页里只显示了480*320，这样devicePixelRatio＝2。如今android比较乱，有1.5的，有2的也有3的。
想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（通常状况都是用2倍）。例如一个div的宽高是100*100，背景图必须得200*200，而后background-size:contain;，这样显示出来的图片就比较清晰了。
//代码能够以下：
background:url(../images/icon/all.png)  no-repeat center center;
-webkit-background-size:50px 50px;
background-size: 50px 50px;
display:inline-block; 
width:100%; 
height:50px;

• h5页面有个很蛋疼的问题就是，当输入框在最底部，点击软键盘后输入框会被遮挡。

//可采用以下方式解决
var oHeight = $(document).height(); //浏览器当前的高度
 $(window).resize(function(){ 
      if($(document).height() < oHeight){ 
            $("#footer").css("position","static"); 
      }else{ 
            $("#footer").css("position","absolute");
      } 
});

关于Web移动端Fixed布局的解决方案，这篇文章也不错 http://efe.baidu.com/blog/mobile-fixed-layout/

• 不让 Android 手机识别邮箱

<meta content="email=no" name="format-detection" />

• 禁止 iOS 识别长串数字为电话

<meta content="telephone=no" name="format-detection" />

• 禁止 iOS 弹出各类操做窗口

-webkit-touch-callout:none

• 消除 transition 闪屏

-webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-backface-visibility: hidden; /*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/

• iOS 系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格

能够经过正则去掉     
 this.value = this.value.replace(/\u2006/g, '');

• 禁止ios和android用户选中文字

-webkit-user-select:none

• 在ios和andriod中,audio元素和video元素没法自动播放

//解决方案：触屏即播
$('html').one('touchstart',function(){ audio.play()})

• ios下取消input在输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

• android下取消输入语音按钮

input::-webkit-input-speech-button {display: none}

• 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](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 参见：http://javascript.ruanyifeng.com/htmlapi/canvas.html ``` 下面举例说明一个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 +='

';
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应用是否以全屏模式运行。
语法：
说明：若是content设置为yes，Web应用会以全屏模式运行，反之，则不会。
content的默认值是no，表示正常显示。你能够经过只读属性window.navigator.standalone来肯定网页是否以全屏模式显示。

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

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

- html5GPS定位功能  具体请看：http://www.jb51.net/post/html5_GPS_getCurrentPosition
- 上下拉动滚动条时卡顿、慢

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

- 1三、ios和android下触摸元素时出现半透明灰色遮罩

Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
设置alpha值为0就能够去除半透明灰色遮罩，备注：transparent的属性值在android下无效。

一篇文章有详细介绍，地址：http://www.jb51.net/post/phone_web_ysk
- active兼容处理 即 伪类 :active 失效

方法一：body添加ontouchstart

方法二：js给 document 绑定 touchstart 或 touchend 事件

bar

- 动画定义3D启用硬件加速

Element {
-webkit-transform:translate3d(0,0,0)
transform: translate3d(0,0,0);
}
注意：3D变形会消耗更多的内存与功耗

- Retina屏的1px边框

Element{
border-width:thin;
}

- webkit mask 兼容处理

某些低端手机不支持css3 mask，能够选择性的降级处理。
好比可使用js判断来引用不一样class：
if('WebkitMask'indocument.documentElement.style){
alert('支持mask');
}else{
alert('不支持mask');
}

- 圆角bug

某些Android手机圆角失效
解决方案：background-clip: padding-box;

- 顶部状态栏背景色

说明：除非你先使用apple-mobile-web-app-capable指定全屏模式，不然这个meta标签不会起任何做用。
若是content设置为default，则状态栏正常显示。
若是设置为blank，则状态栏会有一个黑色的背景。
若是设置为blank-translucent，则状态栏显示为黑色半透明。
若是设置为default或blank，则页面显示在状态栏的下方，即状态栏占据上方部分，页面占据下方部分，两者没有遮挡对方或被遮挡。
若是设置为blank-translucent，则页面会充满屏幕，其中页面顶部会被状态栏遮盖住（会覆盖页面20px高度，而iphone4和itouch4的Retina屏幕为40px）。
默认值是default。

- 设置缓存

手机页面一般在第一次加载后会进行缓存，而后每次刷新会使用缓存而不是去从新向服务器发送请求。
若是不但愿使用缓存能够设置no-cache。

- 桌面图标

iOS下针对不一样设备定义不一样的桌面图标。若是不定义则以当前屏幕截图做为图标。
上面的写法可能你们会以为会有默认光泽，下面这种设置方法能够去掉光泽效果，还原设计图的效果！

图片尺寸能够设定为5757（px）或者Retina能够定为114114（px），ipad尺寸为72*72（px)

- 启动画面

iOS下页面启动加载时显示的画面图片，避免加载时的白屏。
能够经过madia来指定不一样的大小：

- 浏览器私有及其它meta

如下属性在项目中没有应用过，能够写一个demo测试如下！
//QQ浏览器私有
全屏模式

强制竖屏

强制横屏

应用模式

//UC浏览器私有
全屏模式

强制竖屏

强制横屏

应用模式

//其它
针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，好比黑莓

微软的老式浏览器

windows phone 点击无高光

- IOS中input键盘事件keyup、keydown、keypress支持不是很好

问题是这样的，用input search作模糊搜索的时候，在键盘里面输入关键词，会经过ajax后台查询，而后返回数据，而后再对返回的数据进行关键词标红。用input监听键盘keyup事件，在安卓手机浏览器中是能够的，可是在ios手机浏览器中变红很慢，用输入法输入以后，并未马上相应keyup事件，只有在经过删除以后才能相应！
解决办法：
能够用html5的oninput事件去代替keyup


而后就达到相似keyup的效果！

- h5网站input 设置为type=number的问题

• h5网页input 的type设置为number通常会产生三个问题，一个问题是maxlength属性很差用了。
  另一个是form提交的时候，默认给取整了。三是部分安卓手机出现样式问题。

//问题一解决，我目前用的是js。以下
<input type="number"oninput="checkTextLength(this ,10)">
functioncheckTextLength(obj, length) {  
      if(obj.value.length > length)  {     
        obj.value = obj.value.substr(0, length);  
      } 
}
//问题二，是由于form提交默认作了表单验证，step默认是1,要设置step属性，假如保留2位小数，写法以下：
<input type="number"step="0.01"/>
关于step，我在这里作简单的介绍，input 中type=number，通常会自动生成一个上下箭头，点击上箭头默认增长一个step，点击下箭头默认会减小一个step。number中默认step是1。也就是step=0.01,能够容许输入2位小数，而且点击上下箭头分别增长0.01和减小0.01。
假如step和min一块儿使用，那么数值必须在min和max之间。
看下面的例子：
<input type="number"step="3.1"min="1"/>
输入框能够输入哪些数字？
首先，最小值是1，那么能够输入1.0，第二个是能够输入（1+3.1）那就是4.1,以此类推，每次点击上下箭头都会增长或者减小3.1，输入其余数字无效。这就是step的简单介绍。
//问题三，去除input默认样式
input[type=number] {
  -moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance:none;
  margin:0;
}

• ios 设置input 按钮样式会被默认样式覆盖

解决方式以下：
input,
textarea {
  border: 0; 
  -webkit-appearance: none; 
}
设置默认样式为none

• select 下拉选择设置右对齐

设置以下：
select option {
    direction: rtl;
}

• 经过transform进行skew变形，rotate旋转会形成出现锯齿现象

能够设置以下：
-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);
 transform: rotate(-4deg) skew(10deg) translateZ(0);
 outline: 1px solid rgba(255,255,255,0)

• 关于 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%;

• 移动端 HTML5 audio autoplay 失效问题

这个不是 BUG，因为自动播放网页中的音频或视频，会给用户带来一些困扰或者没必要要的流量消耗，因此苹果系统和安卓系统一般都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才能够播放。
解决方法思路：先经过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操做就没问题了）。
document.addEventListener('touchstart',function() {
  document.getElementsByTagName('audio')[0].play();
  document.getElementsByTagName('audio')[0].pause();
});

• 移动端 HTML5 input date 不支持 placeholder 问题

这个我感受没有什么好的解决方案，用以下方法
<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')"  id="date">

• 部分机型存在type为search的input，自带close按钮样式修改方法

有些机型的搜索input控件会自带close按钮（一个伪元素），而一般为了兼容全部浏览器，咱们会本身实现一个，此时去掉原生close按钮的方法为:
#Search::-webkit-search-cancel-button{
  display:none; 
}
若是想使用原生close按钮，又想使其符合设计风格，能够对这个伪元素的样式进行修改。

• 唤起select的option展开

//zepto方式:
$(sltElement).trigger("mousedown");
//原生js方式:
functionshowDropdown(sltElement) {
  varevent;
  event = document.createEvent('MouseEvents');
  event.initMouseEvent('mousedown',true,true, window);
  sltElement.dispatchEvent(event);
};

以上全部资料搜集整理自网络，若有不对的地方但愿及时告知，欢迎你们批评指正，谢谢！