浅谈Html5移动端ios/Android兼容性总结

源码坊

以前做pc端，也会遇到兼容性的问题，不过说实话，脑海里全是ie的问题，并没有什么可特别注意的，可能是我不善总结，现在做移动端（本来觉得移动端很easy，所以没放在眼里），so，我错了，我为自己的轻视高傲买单！
最近就遇见了一些兼容性bug，从网上找了资料。
先说一下viewport
先上模板

1. <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 不然写运动效果时容易出现跳
禁止复制、选中文本

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

复制代码

苹果手机固定定位有bug 检查html和body是不是设置了overflow-x:hidden;
给不同屏幕大小的手机设置特殊样式

1. @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

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

复制代码

ios 设置input 按钮样式会被默认样式覆盖
解决方式如下：

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

复制代码

   
消除 IE10 里面的那个叉号:input:-ms-clear{display:none;}   
手机上的flex布局时会有兼容性问题，只用新版本的会出现安卓手机不识别的现象

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

1. .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端出现上下箭头

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

复制代码

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

1. <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");    };})

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持模板人源码语。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！模板人源码·版权声明


本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。本站部分作品是由网友自主投稿和发布、编辑整理上传，对此类作品本站仅提供交流平台，不为其版权负责。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。
      本网站所提供的信息，只供参考之用学习交流，切勿用作非法用途。本网站不保证信息的准确性、有效性、及时性和完整性。本网站及其雇员一概毋须以任何方式就任何信息传递或传送的失误、不准确或错误，对用户或任何其他人士负任何直接或间接责任。在法律允许的范围内，本网站在此声明，不承担用户或任何人士就使用或未能使用本网站所提供的信息或任何链接所引致的任何直接、间接、附带、从属、特殊、惩罚性或惩戒性的损害赔偿。        唯一网址: https://www.mubanren.com/thread-293-1-1.html