兼容性积累

一、兼容性问题

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 ouchend)需要冒泡到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事件

主要情况在

二、怪异行为消除

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.去除表单等元素iosandroid的系统默认样式

   -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

三、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="标题">

四、技巧类

1.IOS桌面图标的设置

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

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

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

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

IOS下会有光泽感，使用一下标签可以取消光泽感

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

 

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

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