移动端常见问题

1.手机端点击input会放大
解决方法：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

user-scalable设置为no，表示禁止缩放
苹果在Safari中，屏蔽了Meta下的user-scalable=no功能。所以在iOS10下面，就算加上user-scalable=no，Safari浏览器也能支持手动缩放。所以只能用js加监听事件来阻止手动缩放。

<script>
	window.onload=function(){
		document.addEventListener("touchstart",function(even){
			if(even.touches.length>1){
				event.preventDefault();
			}
		})
		var lastTouchEnd=0;
		document.addEventListener("touchend",function(even){
			var now=(new Date()).getTime();
			if((now-lastTouchEnd)<=300){
				event.preventDefault();
			}
			lastTouchEnd=now;
		},false)
	}
</script>

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

body {-webkit-overflow-scrolling: touch; overflow-scrolling: touch;}

Android3+和iOS5+支持CSS3的新属性为overflow-scrolling
3.Retina(一种新型高分辨率的显示标准)屏的1px边框

.width{
  border-width:thin;
}

3.ios手机键盘，输入后把换行改成搜索

<form action="javascript:return true">
    		<input type="search" placeholder="输入感兴趣的科目/课程" class="qlu-search-input"/>
</form>

4.input改变search框默认清除X样式重写

input[type=search]::-webkit-search-cancel-button{ -webkit-appearance: none; position: relative; height: 15px; width: 15px; border-radius: 50%; background :#EBEBEB url("img/clear.png") no-repeat center; background-size: 18px 18px; }

注：ios可能不支持，所以还是自己写的

input[type=search]::-webkit-search-cancel-button{ -webkit-appearance: none; }//去掉自带的小叉号

5.按钮不居中（没解决）

①兼容的方法就是不要设置height，line-height设置为1，用padding值上下相等来保持垂直居中。（这种方式看着安卓还是有点靠上）
②用js判断是否是安卓,padding-top:多一两个像素（没试）

isAndroid: function(){
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/android/i) == "android") {
        return true;
    } else {
        return false;
    }
  },

if(isAndroid()){
    $('.bank-list-new').addClass('android');
}

.bank-list-new{
    margin: 10px auto;
}
.bank-list-new.android{
    margin-top: 13px;
}

6.input清除自动记忆功能
input 的autocomplete属性默认是on：其含义代表是否让浏览器自动记录之前输入的值
off：则关闭记录

<input type="text" class="common-input" autocomplete="off" placeholder="请输入您的手机号码" id="userPhone"/>