IOS 安卓的兼容问题

meta用法

实例：
    <!-- 声明编码格式 -->
    <meta charset="utf-8">
    <!-- 自适应手机屏幕适配：页面宽度为设备屏幕宽度width=device-width、用户是否可以调整缩放比例user-scalable=no 
          初始的缩放比例initial-scale=1.0、最小缩放比例minimum-scale=0.5、
          最大缩放比例maximum-scale=1.0（选填可不加）-->
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0">
    <!-- 网站作者 -->
    <meta name="author" content="作者名、昵称、代号等">
    <!-- 网站描述 -->
    <meta name="description" content="本网站为...类型网站，主要服务对象为...">
    <!-- 网站关键词 -->
    <meta name="keywords" content="关键词1，关键词2，...">
    <!-- 禁止链接高亮 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- format-detection为格式检测 -->
    <!-- 禁止手机自动将网页中的电话号码显示为拨号的超链接 -->
    <meta name="format-detection" content="telephone=no">
    <!-- 告诉设备不识别邮箱，点击之后不自动发送 -->
    <meta name="format-detection" content="email=no">
    <!-- 禁止跳转至地图功能页面 -->
    <meta name="format-detection" content="adress=no">
    <!-- UC强制竖屏 -->
    <meta name="screen-orientation" content="portrait"> 
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true" />
    <!-- 360-优先使用 IE 最新版本和 Chrome进行渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
(1)禁止 iOS 识别长串数字为电话
   <meta content="telephone=no" name="format-detection" />

(2)防止手机中网页放大和缩小,强制文档宽度与设备宽度1:1，防止ios因缩放出现滚动条，导致定位bug
   <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

(3)是否以全屏模式运行
   <meta name="apple一mobile一web一app一capable" content="yes">**如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示;也可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。

(4)启动或禁用自动识别页面中的电话号码。
   <meta name="format一detection" content="telephone=no">
   默认情况下，设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。

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

(6)设置缓存
  <meta http一equiv="Cache一Control" content="no一cache" />

(7)iPhone刘海机型背景覆盖
 一、设置网页在可视区域的布局方式
 新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口：
 <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
 二、让主体内容控制在安全区域内
 假设我们的底部按钮高度是50px：
 body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: 底部按钮高度;  /* 兼容不支持 env( ) 的设备,为了兼容没有底部胡子的设备，让主体内容偏移出底部按钮的高度，避免按钮遮挡内容。 */
  padding-bottom: calc(env(safe-area-inset-bottom) + 底部按钮高度); /* 在 iphone x + 中本句才会生效 */
  padding-left: env(safe-area-inset-left);
 }
 三、底部按钮的处理
 首先给底部按钮一个外层容器 .btn-container ，设置样式时其中有几点比较关键：
 1、设置padding-bottom: env(safe-area-inset-bottom);增加一个 padding 值，让底部向外扩展一个非安全区域的距离。
 2、设置background: #FFF 让整个 .btn-container 背景为白色（包括刚新增的 padding-bottom 的区域）这样就可以遮挡住了底部内容。
 3、设置 box-sizing: content-box; ，因为在通常情况下 css 在 reset 阶段一般都设置了 * {box-sizing: border-box;} 这样一来设置 padding 就不能向外扩展距离了，所以在这里我们要把他改回 content-box。
   .btn-container {box-sizing: content-box;height: 50px;line-height: 50px;color: #fff;position: fixed;bottom: 0;left: 0;right: 0;text-align: center;background: #FFF;padding-bottom: env(safe-area-inset-bottom);}
  .btn {width: 100%;height: 50px;line-height: 50px;background-color: #00c340;border: none;}

(8)表单input元素获取焦点时页面被放大
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

禁止 iOS 弹出各种操作窗口
-webkit-touch-callout:none

消除 transition 闪屏

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

禁止ios和android用户选中文字
-webkit-user-select:none

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

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

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

1fixed定位缺陷

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:100%;
      /** -webkit-text-size-adjust:100%; **/
  }

往返缓存问题

点击浏览器的回退，有时候不会自动执行js，特别是在mobilesafari中。这与往返缓存(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下则有效。类似
Element :hover { display:block; }
这样的导航显示在iOS6点击没有点击效果，只能通过增加点击侦听器给元素增减class来控制子元素。

在移动端修改难看的点击的高亮效果

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

CSS3的属性

加上后，所关联的元素的事件监听都会失效，等于让元素变得“看得见，点不着”。IE到11才开始支持，其他浏览器的当前版本基本都支持。详细介绍见这里：https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
pointer-events: none;

页面高度渲染错误

在各移动端浏览器中经常会出现这种页面高度100%的渲染错误，页面低端和系统自带的导航条重合了，高度的不正确我们需要重置修正它，通过javascript代码重置掉：
document.documentElement.style.height = window.innerHeight + 'px';

叠加区高亮

在部分android机型中点击页面某一块区域可能会出现如图所示的黄色框秒闪，这是部分机型系统自身的默认定制样式，给该元素一个CSS样式重置掉：
-webkit-tap-highlight-color:rgba(0,0,0,0);

:active 效果不兼容

在android 4.0版本以下CSS :active伪状态效果无法兼容
**方法一：body添加ontouchstart**
 <body ontouchstart="">
**方法二：js给 document 绑定touchstart 或 touchend 事件**
 <style>
   a {
       color: #000;
     }
   a:active {
       color: #fff;
     }
 </style>
 <body>
 <a herf=foo >bar</a>
</body>
<script>
  document.addEventListener('touchstart',function(){},false);
</script>

预加载、自动播放无效

如上表所示，经过简单的测试发现预加载、自动播放的有效性受操作系统、浏览器（webview）、版本等的影响，苹果官方规定必须由用户手动触发才会载入音频，那么我们捕捉一次用户输入后，让音频加载实现预加载:
//play and pause it once
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});

不支持局部滚动

在android 4.0版本以下在body(html)元素之外的元素 overflow:scroll 样式设置滚动条无效，这里有两种解决方案:
1、巧用布局直接设置样式滚动条在body(html)上，其他元素“错觉滚动”。
2、利用iscroll、自写js控制translate、scrollTop模拟

悬浮的表单

在部分android 机型中的输入框可能会出现如图怪异的多余的浮出表单，经过观察与测试发现只有input:password类型的输入框存在，那么我们只要使用input:text类型的输入框并通过样式
-webkit-text-security: disc;

错误出现滚动条

在内嵌页中出现了不应该出现的滚动条，而且内容并没有超出内容区宽度，经过测试overflow:hidden 无效，通过一系列尝试使用古老的 
<body scroll="no"> 

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

因为手机分辨率太小，如果按照分辨率来显示网页，字会非常小，安卓手机devicePixelRatio比较乱，有1.5的，有2的也有3的。想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍），或者指定** background一size:contain;**

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

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

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

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

长时间按住页面出现闪退

 element {
  一webkit一touch一callout: none;
}

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

 Element{
   一webkit一appearance: none;
}

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

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

Retina屏的1px边框

 Element{
    border一width: thin;
}

webkit mask 兼容处理

可以使用js判断来引用不同class：
  if( 'WebkitMask' in document.documentElement.style){
      alert('支持mask');
    } else {
      alert('不支持mask');
  }

圆角bug

某些Android手机圆角失效
background一clip: padding一box;

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

一般会产生三个问题:
(1)问题是maxlength属性不好用了。
(2)form提交的时候，默认给取整了。
(3)部分安卓手机出现样式问题。
使用js解决
问题一：
  <input type="number" oninput="checkTextLength(this ,10)">
  function checkTextLength(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默认样式
  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;
  }

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)

移动端点透问题

  <div id="haorooms">点头事件测试</div>
  <a href="[www.jb51.net](http://www.jb51.net/)">[www.jb51.net](http://www.jb51.net/)</a>
  //div是绝对定位的蒙层,并且z一index高于a。而a标签是页面中的一个链接，我们给div绑定tap事件：
  $('#haorooms').on('tap',function(){
      $('#haorooms').hide();
  });

ios固定定位元素随着页面的滑动而抖动问题

解决方案 ： 避免滚动元素内部使用 position: fixed
<style lang="less" scoped>
.my_page {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  .mk_nav_header{
    position: fixed;
    height: 44px;
    top: 0;
    left: 0;
    right: 0;
  }
  //滚动区域
  .mk_nav_content {
    position: absolute;
    top: 44px;
    bottom: 50px;
    left: 0;
    right: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.mk_nav_footer {
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height : 50px;
}
<template>
  <div class='my_page'>
    <mk-header class="mk_nav_header"></mk-header>
    <!-- 滚动区域 -->
    <div class="mk_nav_content">
         <p v-for="index in 100" :key="index">我是第{{index}}个元素</p>
    </div>
    <mk-footer class="mk_nav_footer"></mk-footer>
  </div>
</template>

表单输入框

(1)表输入框placeholder的文字换行
   html,body{
      overflow: hidden;/*手机上写overflow-x:hidden;会有兼容性问题，如果子级如果是绝对定位有运动到屏幕外的话ios7系统会出现留白*/
      -webkit-overflow-scrolling:touch;/*流畅滚动,ios7下会有滑一下滑不动的情况，所以需要写上*/
      position:realtive;/*直接子级如果是绝对定位有运动到屏幕外的话，会出现留白*/
   }

(2)表单输入框placeholder的颜色值
  input::-webkit-input-placeholder{color:#999;}
  input:focus::-webkit-input-placeholder{color:#999;}

(3)iOS 系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格
  可以通过正则去掉  this.value = this.value.replace(/\u2006/g, '');

(4)IOS中input键盘事件keyup、keydown、keypress
用inputsearch做模糊搜索的时候，在键盘里面输入关键词，会通过ajax后台查询，然后返回数据，然后再对返回的数据进行关键词标红。用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中变红很慢，用输入法输入之后，并未立刻响应keyup事件，只有在通过删除之后才能响应
解决办法：可以用 html5 的oninput事件去代替keyup
input type="text" id="testInput">
<script type="text/javascript">
   document.getElementById('testInput').addEventListener('input',     function(e){
       var value = e.target.value;
    });
</script>

(5)部分机型存在type为search的input，自带close按钮样式修改方法
有些机型的搜索input控件会自带close按钮（一个伪元素），而通常为了兼容所有浏览器，我们会自己实现一个，此时去掉原生close按钮的方法为
  Element::一webkit一search一cancel一button{
    display: none; 
  }

(6)设置input 按钮样式会被默认样式覆盖
  input,textarea {
    border: 0;
    一webkit一appearance: none; //设置默认样式为none
  }

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

(8)ios下取消input在输入的时候英文首字母的默认大写
  <input autocapitalize="off" autocorrect="off" />