H5移动开发总结

最近做移动网页遇到许多苹果和安卓的坑，记录总结一下

 

提示：手机端下拉加载问题不要通过滚动条解决，因为苹果系统拥有橡皮筋弹性滑动，会让问题更麻烦。建议直接通过触屏来解决

 

①修改苹果按钮默认样式：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;}