移动端总结和手机兼容问题

Posted 2020-08-26 web前段领域

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

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

（部分安卓手机的UC浏览器写完以后还是可以放大缩小）

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

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

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

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

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">

 

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

.css{-webkit-appearance:none;} （ios上的下拉框会有圆角，所以要写border-radius:0）

 

在input框获得焦点时文字被清空用value 在input框输入文字时被清空用placeholder

 

webkit表单输入框placeholder的文字能换行么？ios可以，android不行~,在textarea标签下都可以换行~

 

html,body{

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

-webkit-overflow-scrolling:touch;/*流畅滚动,ios7下会有滑一下滑不动的情况，所以需要写上*/

position:realtive;/*直接子级如果是绝对定位有运动到屏幕外的话，会出现留白*/

 

}

 

手机上的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;/*解决兼容性问题*/

}

 

 

 

输入框的兼容性解决

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框输入瞬间变白的现象*/

}

 

禁用 radio 和 checkbox 默认样式

input[type="radio"]::-ms-check,input[type="checkbox"]::-ms-check{

display: none;/*这样就可以用class自定义样式*/

}

 

webkit表单输入框placeholder的颜色值

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

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

 

手机上的多行省略

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

}

文本标签line-height：1或者是line-height等于height文字会被切掉

 

手机上浮动元素能写宽尽量写宽不然很容易出现兼容性问题,尽量不要写高，因为内容多少不固定

 

给不同屏幕大小的手机设置特殊样式

 

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

 

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

 

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

input框若是不想输入文字 只能读不能写可以加readonly属性

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

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

 

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

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

面包屑导航如果按照bootstrap给li加：after伪元素的话在其他浏览器和在UC浏览器中表现的不一样，UC的的会比其他的浏览器宽，所占位置更多

 

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

 

IOS手机中如果出现一个元素的层级非常高可还是被别的元素遮盖的，那么就将该元素与别的元素同级

 

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