最近做移动网页遇到许多苹果和安卓的坑，记录总结一下
提示：手机端下拉加载问题不要通过滚动条解决，因为苹果系统拥有橡皮筋弹性滑动，会让问题更麻烦。建议直接通过触屏来解决
①修改苹果按钮默认样式：iphone自带的样式会替换自定义的css样式，只要只要在样式里面加一句去掉css去掉iPhone、iPad的默认按钮样式就可以了
input[type=
"button"
], input[type=
"submit"
], input[type=
"reset"
] {
-webkit-appearance:
none
;
}
textarea { -webkit-appearance:
none
;}
②去掉浏览器中autocomplete带来的黄色背景
input:-webkit-autofill {
-webkit-box-shadow:
0
0
0px
1000px
white
inset
;
}
③修改IPhone下数字自动加下划线的问题，这里我是遇到自动检测高亮手机号码
在开发iphone应用程序的时候，safari下手机号码默认是有下划线的，通过下面的方法就可以去掉：
<meta name="format-detection" content="telephone=no" />
④H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
⑤忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />
⑥安卓上圆形图片使用 border 时，边框显示变形
解决办法：给 img 外嵌套一个元素，为其使用圆角
div{width:100px;height:100px;display: inline-block; border-radius: 50%; border: 3px solid #FFA500;}
img{width:100px;height:100px;border-radius: 50%;}
⑦焦点在 input 时，placeholder 没有隐藏
解决办法：
input:focus::-webkit-input-placeholder{ opacity: 0;}
⑧input file 上传图片、视频 调用API
<input type="file">的accept 属性
<!-- 选择照片 -->
<input type="file" accept="image/*" capture="camera">
<!-- 选择视频 -->
<input type="file" accept="video/*" capture="camcorder">
⑧打电话发短信
打电话<a href="tel:10086">打电话给: 10086</a>
发短信<a href="sms:10086">发短信给: 10086</a>-----message短信
⑨禁止ios和android用户选中文字
.css{-webkit-user-select:none;}
⑩webkit表单输入框placeholder的颜色值改变
input::-webkit-input-placeholder{color:# 90EE90;}
input:focus::-webkit-input-placeholder{color:# 87CEEB;}