移动端兼容性问题集

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

// ios全屏
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
//安卓禁止识别邮箱
<meta content="email=no" nam="format-detection" />

//ios禁止识别长串数字为电话
<meta content="telephone=no" name="format-detection" />

// ios的safari顶端状态条的样式
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> // 可选default（白色）、black（黑色）、black-translucent（灰色半透明，网页充满整个屏幕，状态会盖在网页之上）

// ios自动增加图标效果
<meta name="apple-mobile-web-app-title" content="web app name"/>

// 使用原图作为APP的图，使各平台的图标保持一致
<link rel="apple-touch-icon-precomposed" href="app.png"/>

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, "/"));