扣丁学堂HTML5培训浅谈HTML5移动端ios/Android兼容性总结

本篇文章扣丁学堂HTML5培训小编给读者们分享一下HTML5移动端ios/Android兼容性总结，对HTML5开发感兴趣的小伙伴就随小编来了解一下吧，希望对小伙伴们有帮助。

先上模板

<meta charset="utf-8">
<!--主要I是强制让文档的宽度与设备宽度保持1:1，最大宽度1.0，禁止屏幕缩放。-->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<!--这个也是iphone私有标签，允许全屏浏览。-->
<meta content="yes" name="apple-mobile-web-app-capable">
<!--iphone的私有标签，iphone顶端状态条的样式。-->
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<!--禁止数字自动识别为电话号码，这个比较有用，因为一串数字在iphone上会显示成蓝色，样式加成别的颜色也是不生效的。-->
<meta content="telephone=no" name="format-detection">
<!--禁止email识别-->
<meta content="email=no" name="format-detection">

写背景图时最好加上top left 或者0 0 不然写运动效果时容易出现跳

禁止复制、选中文本

.el {
 -webkit-user-select: none;
 -moz-user-select: none;
 -khtml-user-select: none;
 user-select: none;
}

苹果手机固定定位有bug 检查html和body是不是设置了overflow-x:hidden;

给不同屏幕大小的手机设置特殊样式

@media only screen and (min-device-width : 320px) and (max-device-width : 375px){}

IOS中input键盘事件keyup、keydown、keypress支持不是很好, 用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中用输入法输入之后，并未立刻相应keyup事件，只有在通过删除之后才可以响应。

方法：可以用html5的oninput事件去代替keyup

<input type="text" id="testInput">
<script type="text/javascript">
 document.getElementById('input').addEventListener('input', function(e){
 var value = e.target.value;
 });
</script>

ios 设置input 按钮样式会被默认样式覆盖

解决方式如下：

input,textarea {
 border: 0;
 -webkit-appearance: none;
}

消除 IE10 里面的那个叉号:input:-ms-clear{display:none;}

手机上的flex布局时会有兼容性问题，只用新版本的会出现安卓手机不识别的现象

flex布局对于低版本的安卓，不支持flex-wrap:wrap属性，但是ios系统支持换行属性，这个时候如何解决呢？当然是不使用换行，用其他方式代替。

.box{
 display: -webkit-box; 
 /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
 display: -moz-box; /* 老版本语法: Firefox (buggy) */
 display: -ms-flexbox; /* 混合版本语法: IE 10 */
 display: -webkit-flex; /* 新版本语法: Chrome 21+ */
 display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}

input 的placeholder属性会使文本位置偏上

line-height: （和input框的高度一样高）---pc端解决方法

line-height：normal ---移动端解决方法

input type=number之后，pc端出现上下箭头

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
 -webkit-appearance: none !important;
 margin: 0;
}

实现android和ios系统手机打开相机并可选择相册功能

<input class="js_upFile cover1" type="file" name="cover" accept="image/*" capture="camera" multiple/>
$(function () {
 //获取浏览器的userAgent,并转化为小写
 var ua = navigator.userAgent.toLowerCase();
 //判断是否是苹果手机，是则是true
 var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
 if (isIos) {
 $("input:file").removeAttr("capture");
 };
})

想要了解更多关于HTML5开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育有专业的HTML5讲师为您指导，此外扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。

H5基础课程：https://ke.qq.com/course/320523?flowToken=1008606【扫码进入HTML5前端开发VIP免费公开课】

注：点击(了解更多)进入课程直播间