移动端兼容性问题集

1.input获取焦点时，页面被放大

// ios全屏


//安卓禁止识别邮箱


//ios禁止识别长串数字为电话


// ios的safari顶端状态条的样式
 // 可选default（白色）、black（黑色）、black-translucent（灰色半透明，网页充满整个屏幕，状态会盖在网页之上）

// ios自动增加图标效果


// 使用原图作为APP的图，使各平台的图标保持一致

2.ios input输入时白屏

这个问题貌似只有再ios9中才有
解决方法：在input的父元素上添加相对定位就行了，非常神奇

style="postion:relative;"

3.底部软键盘被遮挡

//input输入框弹起软键盘的解决方案。
var bfscrolltop = document.body.scrollTop;
$("input").focus(function () {
  document.body.scrollTop = document.body.scrollHeight;
}).blur(function () {
  document.body.scrollTop = bfscrolltop;
});

4.new Date()设置日期在IOS的兼容问题

var d = new Date("2017-08-11 12:00:00".replace(/-/g, "/"));

5.ios页面滚动不流畅
首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。

解决方案是：
1.让html和body固定100%（或者100vh），
2.然后再在内部放一个height:100%的div，设置overflow-y: auto;和-webkit-overflow-scrolling: touch;

.scroll-box {
  /* 模态框之类的div不能放在这个容器中 */
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

6.position:fixed/absolute随屏幕滚动
注：ios里貌似不支持fixed。。。这里主要指absolute
在position:fixed/absolute内加入：

-webkit-transform: translateZ(0);

抖动情况，则在内容区域，加入 ：

overflow-y: auto;

7.a标签、input标签、button标签点击后产生蓝色边框

a,button,input,textarea { 
   outline:none;
   -webkit-tap-highlight-color: rgba(0,0,0,0); 
}   
//winphone下

8.IOS移动端click时间300ms延迟
移动端点击后，在300ms内再次点击屏幕，系统会认为是双击事件，这是区分单击和双击屏幕缩放历史原因造成
解决方案：

// 1.fastclick.js可以解决在手机上点击事件的300ms延迟
var FastClick = require('faskclick')
FastClick.attach(document.body, options)

window.addEventListener('load', function(){
  FastClick.attach(document.body);
});

// 2. touchend代替tap事件并阻止touchend的默认行为；
$('#id').on('tap, function(event){
  event.preventDefault();
});

3. 延迟一定的时间300ms+来处理时间
$('#id').on('tap', function(event){
  setTimeout(function(){
    ...
  }, 320);
});

9.Ios键盘换行变为搜索？
```sh

  

10.iOS 1px border 实现

iOS设备上，由于retina屏的原因，1px 的 border 会显示成两个物理像素,从iOS 8开始，iOS 浏览器支持 0.5px 的 border，但是在 Android 上是不支持的，0.5px 会被认为是 0px，所以这种方法，兼容性是很差的。

另外一种方法是背景渐变，

CSS3 有了渐变背景，可以通过渐变背景实现 1px 的 border，实现原理是设置 1px 的渐变背景，50% 有颜色，50% 是透明。

@mixin commonStyle() {
  background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
  background-repeat: no-repeat;
  background-position: top, right top,  bottom, left top;
}
​
​
@mixin border($border-color) {
  @include commonStyle();
  background-image:linear-gradient(180deg, $border-color, $border-color 50%, transparent 50%),
  linear-gradient(270deg, $border-color, $border-color 50%, transparent 50%),
  linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%),
  linear-gradient(90deg, $border-color, $border-color 50%, transparent 50%);
}

11.ios与android的标签表现不一致的问题
ios和android的select标签还有input[type=”button”]在真机上的样式会有区别，所以我们可以加上这一条css来消除ios和android的样式差别：

-webkit-appearance: none;

12.打电话发短信

  打电话给:135111111111
  发短信给: 10086
  [email protected]

13.禁止复制、选中文本

.el {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}

14.ios默认输入框内有阴影，清除阴影

input,textarea {
  border: 0; // 方法1
  border-color: transparent; // 方法2
  -webkit-appearance: none; // 方法3
  appearance: none;
}

15.flex布局兼容低版本的安卓

.box{
    display: -webkit-box;
    /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}

16.input的placeholder属性在文本位置上偏上

line-height: （和input框的高度一样高）---pc端解决方法
line-height：normal ---移动端解决方法

17.input的text=number，在PC端中上下箭头

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

18.移动端video、audio标签中的autoplay失效
由于安卓和ios系统禁止自动播放和js自动触发，必须是用户去触发生效

document.addEventListener('touchstart',function() {
  document.getElementsByTagName('audio')[0].play();
  document.getElementsByTagName('audio')[0].pause();
});

19.ios系统旋转屏幕时，会自动调整字体大小

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

20.禁止ios弹出各种窗口操作

-webkit-touch-callout:none

21.安卓和ios6浏览器上calc的兼容性处理

div {
  width: 95%;
  width: -webkit-calc(100% - 50px);
  width: calc(100% -50px;)
}

22. ios滚动卡顿

-webkit-overflow-scrolling: touch;

23.卫星浏览器中跳转网页，window.location.href无效

var aClick = document.createElement('a');
aClick.setAttribute('href', 'www.baidu.com');
aClick.Click()

24.禁止ios长按时不触发系统的菜单，禁止ios&Android长按时下载图片

div {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

25.ios下取消input在输入的时候英文字母的默认大写（autocapitalize），关闭ios输入自动修正（autocorrect）

26.ios自带输入法输入中文连续出发多次input事件

var falg = false;
$('#id').on({
  'compositionstart': function(){
    flag = true;
  },
  'compositionend': function(){
    flag = false;
    if(!flag){
      doSomethingFunction();
    }
  },
  'input propertychange': function(){
    if(!flag){
      doSomethingFunction();
    }
  }
});

28.css伪类:active
如果需要 按下激活 状态，推荐使用 js 新增一个 className
iOS上的几乎任何浏览器，定义元素的伪类:active都是无效；
Android上，Android Browser和Chrome都支持伪类:active，其它第三方浏览器有部分不支持；
定义了:active并且当前浏览器环境支持，当手指在滚动或者无意间的划过时:active状态都会被激活；