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

以前做pc端，也会遇到兼容性的问题，不过说实话，脑海里全是ie的问题，并没有什么可特别注意的，可能是我不善总结，现在做移动端（本来觉得移动端很easy，所以没放在眼里），so，我错了，我为自己的轻视高傲买单！

最近就遇见了一些兼容性bug，从网上找了资料。

先说一下viewport

先上模板

写背景图时最好加上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

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

解决方式如下：

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

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系统手机打开相机并可选择相册功能

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持<编程笔记>。