移动端兼容性问题
1 虚拟键盘引起的兼容问题。
box sizing2 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 忽略将页⾯中的数字识别为电话号码
解决⽅案: （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元素⼀定要写上type属性不然会默认提交表单，出现想不到的bug
18
19某些安卓⼿机的⾃带浏览器不识别onkeydown onkeypress onkeyup事件，这些事件会导致不能输⼊汉字
19
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;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。