【H5】316- 移动端H5跳坑指南
最近在一个移动端的 Web 项目中踩了很多的坑，感觉有必要把它们记录下来，分享给即将踏入移动端 Web 开发大门的朋友们，更好的解决ios和android兼容。
1.input获取焦点时，页面被放大
设置meta标签
<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">2.ios input输入时白屏
这个问题貌似只有再ios9中才有 解决方法：在input的父元素上添加相对定位就行了，非常神奇
style="postion:relative;"3.软键盘撑起页面下不来
用js控制focus blur
//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");发现在iOS中不兼容，返回valid 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.点击元素产生背景或边框怎么去掉
ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0去除灰色半透明遮罩；
android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果；
winphone系统,点击标签产生的灰色半透明背景，能通过设置<meta name="msapplication-tap-highlight" content="no">去掉；
//特殊说明：有些机型去除不了，如小米2。对于按钮类还有个办法，不使用a或者input标签，直接用div标签
a,button,input,textarea {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符
}
// 也可以
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
//winphone下
<meta name="msapplication-tap-highlight" content="no">8.IOS机型margin属性无效问题？
(1) 设置html body的高度为百分比时，margin-bottom在safari里失效
(2) 直接padding代替margin
9.Ios键盘换行变为搜索？
首先，input 要放在 form里面。
这时 "换行" 已经变成 “前往”。
如果想变成 “搜索”，input 设置 type="search"。
10.iOS 1px border 实现
iOS设备上，由于retina屏的原因，1px 的 border 会显示成两个物理像素，所以看起来会感觉很粗，这是一个移动端开发常见的问题。解决方案有很多，但都有自己的优缺点。
0.5px 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.打电话发短信
<a href="tel:020-11811922">打电话给:0755-10086</a>
<a href="sms:10086">发短信给: 10086</a>腾讯云开发者
