兼容性积累

1、兼容性问题

1.input输入框+position:absolute带来的问题

状况：在input被获取焦点时，屏幕上position属性值为absolute的元素，包含input，会被弹出的虚拟键盘顶起，致使显示样式异常

展现：android存在问题 ios正常

缘由：当子元素定位方式为absolute或者fixed，父容器没有position:relative，那么当前元素根据body定位。因android的虚拟键盘显示机制占用了一部分的屏幕，使得浏览器的屏幕资源高度缩小，定位发生改变，因此出现“被顶起”的状况。

解决：给被顶起的子元素添加父级元素设relative，并设置高度。

2.移动端click 300ms延迟

状况：会形成按钮点击延迟甚至是点击失效

展现：click事件在ios出现异常

缘由：这是因为区分单击事件和双击屏幕缩放的历史缘由形成的

解决：1.使用fastclick插件（不考虑）

         2.使用touch系列事件：start->move->end->click

         3.借助zepto的touch模块

3.IOS的非点击标签没法绑定click

状况：如题，好比label span

展现：无

缘由：未知

解决：给该标签添加 cursor:pointer属性

4.三星手机遮罩下穿透问题

状况：遮罩层下的input、select、a等元素能够被点击和focus

展现：无

缘由：未知

解决：将问题元素加入的disabled属性

5.fixed兼容性问题

状况：ios下fixed元素定位时容易出错，且软键盘弹出时，影响到fixed元素的定位

展现：Android下大部分正常

缘由：未知

解决：使用iscroll插件

6.底部输入框被遮挡

状况：1.底部输入框软键盘会将底部输入框遮挡

        2.页面自动上移，致使下方空白

        3.IOS使用IScroll时，光标不会伴随输入框移动

        4.软键盘弹出致使页面元素错位

展现：Android和ios

缘由：当输入框位于半屏如下时

解决：1.尽可能避免使用iscroll

        2.ios使用 overflow:auto;

            -webkit-overflow-scrolling:touch;/*当手指从触摸屏上移开，会保持一段时间的滚动*/

            -webkit-overflow-scrolling:auto;/*当手指从触摸屏上移开，滚动会当即中止*/

        3.最好在设计上规避，好比表单填写尽可能分页，保证输入框在上半屏

        4.使用js解决，代价太大，建议不用

var oHeight = $(document).height(); 
   
$(window).resize(function(){
 
     if($(document).height() < oHeight){
         
           $(".inputName").css("position","static");
     }else{
           $(".inputName").css("position","absolute");
     }
        
});

7.数字键盘调起差别

状况：在使用input type=number时，ios不会出现九宫格

展现：ios展现101键盘

缘由：未知

解决：<input type="number" pattern="[0-9]*" />

     <input type="tel" /> 

8.android个别机型 Input 的placeholder会出现文本位置偏上的状况

状况：如题

展现：文本在input中不能垂直居中

缘由：未知

解决：使用line-height:normal

9.safari手机版中回退有概率不会执行js

状况：如题

展现：不执行js代码

缘由：和safari中的往返缓存(b-f cache)机制有关

解决：在页面中增长 window.onunload=function(){}

10.ios6 中hover无效

状况：在ios 6中除了a标签以外的标签:hover无效

展现：如题

缘由：未知

解决：只能使用 css class进行解决

11.zepto tap事件透传

状况：好比关闭遮罩，在关闭按钮绑定tap事件，关闭时会触发遮罩下元素的click事件

展现：无

缘由：zepto的tap经过绑定在document上的touch事件委托来完成tap事件模拟,在点击完成时的tap事件(touchstart\touchend)须要冒泡到document上才会触发，但在冒泡到document以前，用户手的接触屏幕(touchstart)和离开屏幕(touchend)是还会触发click事件,而click事件有300ms延迟，因此在执行完tap事件以后，弹出来的选择组件立刻就隐藏了，此时click事件还在延迟的300ms之中，当300ms到来的时候，click到的其实不是完成而是隐藏以后的下方的元素，若是正下方的元素绑定的有click事件此时便会触发，若是没有绑定click事件的话就当没click，可是正下方的是input输入框(或者select选择框或者单选复选框)，点击默认聚焦而弹出输入键盘，也就出现了上面的点透现象。

解决：1.使用fastclick插件

        2.使用touchend事件替代tap事件

        3.延迟320ms执行

12.android个别机型body高度100%展现错误

状况：实际的高度比100%的高度小

展现：如题

缘由：将系统自带的导航条一并算入高度重

解决：使用js重置高度：document.documentElement.style.height = window.innerHeight + 'px';

13.android部分低端机型中出现黄色框

状况：如题

展现：如题

缘由：系统自带

解决：使用-webkit-tap-highlight-color: rgba(255,0,0,0);消除这一行为

14.android 4.0如下部分机型 active伪类不兼容

状况：android 4.0如下

展现：样式不统一

缘由：系统自身缘由

解决：为存在active的元素监听touch系列事件，且绑定空函数

15.上拉下滑滚动条卡顿 

状况：Android ios都存在

展现：无

缘由：未知

解决：body {-webkit-overflow-scrolling: touch; overflow-scrolling: touch;}  支持：Android3+和iOS5+ 实质就是保持一段时间的滚动

16.mask蒙版的兼容性

状况：低端android不支持mask蒙版

展现：无

缘由：不支持-webkit-mask属性

解决：只能采用降级处理或js、添加html处理，经过判断style中是否存在WebkitMask进行判断，而后采起相应降级措施

17.圆角变方

状况：Android 个别2.x手机圆角失效

展现：时好时坏

缘由：未知

解决：使用css解决：background-clip:padding-box;

         border-box:裁剪背景到边框内

         content-box:裁剪背景到内容内

         padding-box:裁剪背景到内边距内

18.IOS input keyup、keydown、keypress响应较慢

状况：主要存在于IOS中

展现：在输入关键字查询中须要及时响应keyup事件作相应处理，ios中事件触发的并不及时

缘由：未知

解决：使用html5的oninput事件代替onkeyup事件

主要状况在

2、怪异行为消除

1.键盘显示search按钮

  <input type="search">

2.取出textarea默认样式

  去除右下角样式：resize:none

  去除框外上下空白：vertical-align: middle;

3.禁止 iOS 弹出操做窗口

  -webkit-touch-callout:none

4.消除transition闪屏效果

   -webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/

 -webkit-backface-visibility: hidden; /*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/

5.iOS用中文输入法输入英文，字母之间出现六分之一空格

  this.value = this.value.replace(/\u2006/g, '');

6.ios 及 android中audio控件没法自动播放

  监听html touchstart事件，而后触发audio.play

7.android下取消语音输入按钮

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

8.IOS取消英文首字母大写

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

9.打电话和发短信

  <a href="tel:1234-5678">致电:1234-5678</a>

 <a href="sms:13245555555">短信: 13245555555</a>

10.去除表单等元素ios\android的系统默认样式

   -webkit-appearance: none;

11.修改input placeholder的样式

   input::-webkit-input-placeholder{color: #ccc;}

   input:focus::-webkit-input-placeholder{color: #333;}

12.去除android a/button/input标签被点击时产生的边框 & 去除ios a标签被点击时产生的半透明灰色背景

     a,button,input{-webkit-tap-highlight-color: rgba(255,0,0,0);}

13.避免android ios的字体不得小于12px

     -webkit-text-size-adjust:none

     可是会形成safari的字体缩放功能失效，因此建议

     -webkit-text-size-adjust:100%

14.开启硬件加速

    -webkit-transform: translate3d(0, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

   -ms-transform: translate3d(0, 0, 0);

   transform: translate3d(0, 0, 0);

15.返回顶部卡顿 失灵

   因为移动端scroll事件触发的时间不具备连贯性，且支持很差，且zepto没有animate，因此须要使用定时器运动修改scrollTop进行返回顶部

  现成代码：

 

//返回顶部动画
//goTop(500);//500ms内滚回顶部
function goTop(times){
 if(!!!times){
  $(window).scrollTop(0);
  return;
 }
 
 var sh=$('body').scrollTop();//移动总距离
 var inter=13.333;//ms,每次移动间隔时间
 var forCount=Math.ceil(times/inter);//移动次数
 var stepL=Math.ceil(sh/forCount);//移动步长
 var timeId=null;
 function ani(){
  !!timeId&&clearTimeout(timeId);
  timeId=null;
  //console.log($('body').scrollTop());
  if($('body').scrollTop()<=0||forCount<=0){//移动端判断次数好些，由于移动端的scroll事件触发不频繁，有可能检测不到有<=0的状况
   $('body').scrollTop(0);
   return;
  }
  forCount--;
  sh-=stepL;
  $('body').scrollTop(sh);
  timeId=setTimeout(function(){ani();},inter);
 }
 ani();
}

16.取消部分Android机型自带的close按钮

  #Search::-webkit-search-cancel-button{

     display : none ; 

  }

17.chrome Mobile fixed元素没法点击

场景：父子同时设置overflow:hidden 父元素设置position: fixed; 子元素设置position: absolute;且这些元素并未在页面顶部。

此时页面往下滚动， 则出现 子元素没法点击 的bug。

解决：去掉overflow：hidden

 

3、mate标签的使用

1.禁止个别Android 手机识别邮箱

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

2.禁止 iOS 识别长串数字做为手机号

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

3.微信浏览器定宽640px

  <meta name="viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

4.ios 7.0+ 当网站添加到主屏幕存在快速启动方式时隐藏地址栏

  <meta name="apple-mobile-web-app-capable" content="yes" />

5.ios 快速启动时改变顶端状态条样式

  <meta name="apple-mobile-web-app-status-bar-style" content="black|default|black-translucent" />

6.ios android添加主屏快捷方式后的标题

 <meta name="apple-mobile-web-app-title" content="标题">

4、技巧类

1.IOS桌面图标的设置

 

< link rel = "apple-touch-icon" href = "touch-icon-iphone.png" />

 

< link rel = "apple-touch-icon" sizes = "76x76" href = "touch-icon-ipad.png" />

 

< link rel = "apple-touch-icon" sizes = "120x120" href = "touch-icon-iphone-retina.png" />

 

< link rel = "apple-touch-icon" sizes = "152x152" href = "touch-icon-ipad-retina.png" />

IOS下会有光泽感，使用一下标签能够取消光泽感

< link rel = "apple-touch-icon-precomposed" href = "touch-icon-iphone.png" />

 

2.IOS页面启动图片避免白屏

<linkrel="apple-touch-startup-image"href="start.png"/>