移动端浏览器之兼容性问题总结

前言:这里收集一些业内见到的移动端浏览器的兼容性问题. 若是你们也也到过, 欢迎补充.

1 虚拟键盘引发的兼容问题。

2 touch 事件引发的问题.

3 iOS 和 android 系统致使的差异。好比，微信内置浏览器

4 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

解决方案: <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

    （部分安卓手机的UC浏览器写完之后仍是能够放大缩小）

5 忽略将页面中的数字识别为电话号码

解决方案: <meta name="format-detection" content="telephone=no" />（iOS上会明显 有时候会把数字当成电话号码）

6 忽略Android平台中对邮箱地址的识别

解决方案: <meta name="format-detection" content="email=no" />

7 移动端浏览器部分兼容问题

  解决方案: viewport模板:   

<meta charset="utf-8">

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

<meta content="yes" name="apple-mobile-web-app-capable">

<meta content="black" name="apple-mobile-web-app-status-bar-style">

<meta content="telephone=no" name="format-detection">

<meta content="email=no" name="format-detection">

8 webkit表单元素的默认外观怎么重置

解决方案: .css{-webkit-appearance:none;} （ios上的下拉框会有圆角，因此要写border-radius:0）

9 在input框得到焦点时文字被清空用value 

  在input框输入文字时被清空用placeholde.

10 webkit表单输入框placeholder的文字能换行么？

  ios能够，android不行~,在textarea标签下均可以换行~

      

html,body{ overflow: hidden;/*手机上写overflow-x:hidden;会有兼容性问题，若是子级若是是绝对定位有运动到屏幕外的话ios7系统会出现留白*/

  -webkit-overflow-scrolling:touch;/*流畅滚动,ios7下会有滑一下滑不动的状况，因此须要写上*/ position:realtive;/*直接子级若是是绝对定位有运动到屏幕外的话，会出现留白*/ }

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

 

.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+ */ }

.box>li{ -webkit-box-flex: 1.0; box-flex: 1.0; -webkit-flex: 1.0; flex: 1; width: 0;/*解决兼容性问题*/ }

12 输入框的兼容性解决

 

input[type="text"], input[type="date"], input[type="tel"], input[type="email"], input[type="password"]{ -webkit-appearance: none; display: block; width: 100%; height: 0.8rem; line-height:normal;/*手机上的line-height不能写成和height的值同样，会出现再次输入光标靠上的现象*/ background: none; font-size: 0.32rem; padding-left: 0.28rem; border-radius: 0; -webkit-border-radius: 0; border: 1px solid #d5d5d5; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; outline: none; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0);/*解决加入js后input框输入瞬间变白的现象*/ }

 

13 禁用 radio 和 checkbox 默认样式

input[type="radio"]::-ms-check,input[type="checkbox"]::-ms-check{ display: none;/*这样就能够用class自定义样式*/ }

 

14 webkit表单输入框placeholder的颜色值

input::-webkit-input-placeholder{color:#999;} input:focus::-webkit-input-placeholder{color:#999;}

 

15 手机上的多行省略

.overflow-hidden{ display: box !important; display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 4;/*第几行出现省略号*/

/*text-align:justify;不能和溢出隐藏的代码一块儿写，会有bug*/ }

 

16  文本标签line-height：

 1或者是line-height等于height文字会被切掉

17  手机上浮动元素能写宽尽可能写宽否则很容易出现兼容性问题,尽可能不要写高，由于内容多少不固定给不一样屏幕大小的手机设置特殊样式

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

18 <button></button>元素必定要写上type属性否则会默认提交表单，出现想不到的bug

19 某些安卓手机的自带浏览器不识别onkeydown onkeypress onkeyup事件，这些事件会致使不能输入汉字

20 

 input框如果不想输入文字 只能读不能写能够加readonly属性

 手机上用背景图写运动，若是须要背景图定位来实现运动效果能够用rem进行计算后加上basckground-size:图的个数*100% 0；

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

21 

 弹层的关闭事件容易触发弹层关闭后下一层的事件因此要给弹层关闭事件加上event.preventDefault()

 弹层弹出后不容许屏幕滚动给弹层加mousemove事件event.preventDefault()

22 包屑导航若是按照bootstrap给li加：after伪元素的话在其余浏览器和在UC浏览器中表现的不同，UC的的会比其余的浏览器宽，所占位置更多

23 

 若是一个手机看到的和其余手机不同 会比其余的手机大或者小，查看他的浏览器字体设置是否正常，应该是他把手机浏览的字号调小或者调大了（坑人的所谓的bug）

24 

 IOS手机中若是出现一个元素的层级很是高可仍是被别的元素遮盖的，那么就将该元素与别的元素同级

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

 

 

 

 

 

参考文章:

https://www.v2ex.com/t/359985?p=1

https://www.cnblogs.com/zhangxinerfenxiang/p/6245622.html