安卓、ios和pc的兼容性问题
一、日期
- 安卓:年月日中间使用
"-"
和"/"
都可以 - ios:年月日中间只能使用
"/"
二、 input框聚焦,ios出现outline或者阴影,安卓显示正常
ios解决办法
input:focus{outline:none}
input:{-webkit-appearance: none;}
三、关于flex布局的换行问题
对于低版本的安卓,不支持flex-wrap:wrap属性,但是ios系统支持换行属性
解决办法:
- 不使用换行
- 如果你的布局必须要用到换行,那就在外层包裹一个大的div,然后设置几个小div,每个小div的布局都是flex(但是不换行)
四、ios系统,会将数字当成电话号码,导致变色
ios解决办法
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">
将上面的代码加入到<head>
标签中
五、禁止安卓识别email
安卓解决办法
<meta content="email=no" name="format-detection" />
将上面的代码加入到<head>
标签中
六、<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;
}