移动端问题踩坑-白红宇

双击页面放大问题需要在html添加如下代码


    复制代码

苹果手机页面滑动不流畅需要在页面的最顶级的class添加样式代码

-webkit-overflow-scrolling: touch复制代码

苹果手机输入框光标过长不要给input加高度，加padding撑开就行了

取消苹果手机输入框自带阴影效果苹果页面原生的输入框带有阴影，需要添加如下代码

input{    appearance: none;    -webkit-appearance: none;    outline:none;}复制代码

安卓手机点击输入框，弹起的虚拟键盘会遮盖住输入框主要的解决方法是对输入框进行事件监听，当弹起虚拟键盘的时候页面的可视高度会变小，监听变小事件，利用css3的样式即可解决

document.body.addEventListener('focus', function (e) {        focusElem = e.target || e.srcElement;    }, true);    window.addEventListener('resize', function () {        focusElem.scrollIntoView()    })复制代码

PS：React需要添加到生命周期中

苹果端的position:absolute好像有点问题，在top:0;bottom:0;left:0;right:0;的情况下页面会消失，安卓端不会出现这种问题

最简单的Rem适配解决方案

html{
   font-size:10px}@media screen and (min-width:321px) and (max-width:375px){
   html{
   font-size:12px}}@media screen and (min-width:376px) and (max-width:414px){
   html{
   font-size:13px}}@media screen and (min-width:415px) and (max-width:639px){
   html{
   font-size:20px}}@media screen and (min-width:640px) and (max-width:719px){
   html{
   font-size:23px}}@media screen and (min-width:720px) and (max-width:750px){
   html{
   font-size:24px}}@media screen and (min-width:751px) and (max-width:799px){
   html{
   font-size:26px}}@media screen and (min-width:800px){
   html{
   font-size:26px}}复制代码

8.苹果手机的光标随着页面滑动乱窜

可以监听页面的滑动事件，在滑动的时候让光标隐藏

document.body.addEventListener('touchmove',function(e){    if(document.activeElement){        document.activeElement.blur();    }},{
   passive:false})复制代码

PS:与上边的同理，React可以放到componentDidMounted的生命周期里

9.关于iPhone X及苹果异形屏的兼容

想要全屏覆盖，需要在html代码中假如如下代码：


    复制代码

使用CSS对安全区域进行判断并进行兼容

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){    body{     padding-bottom: constant(safe-area-inset-bottom);     padding-bottom: env(safe-area-inset-bottom);    }        .iphonex-pt{     padding-top: constant(safe-area-inset-top);     padding-top: env(safe-area-inset-top);    }    .iphonex-pb{     padding-bottom: constant(safe-area-inset-bottom);     padding-bottom: env(safe-area-inset-bottom);    }    .iphonex-mt{     margin-top: constant(safe-area-inset-top);     margin-top: env(safe-area-inset-top);    }    .iphonex-mb{     margin-bottom: constant(safe-area-inset-bottom);     margin-bottom: env(safe-area-inset-bottom);    }    .iphonex-pl{     padding-left: constant(safe-area-inset-left);     padding-left: env(safe-area-inset-left);    }    .iphonex-pr{     padding-right: constant(safe-area-inset-right);     padding-right: env(safe-area-inset-right);    }    .iphonex-ml{     margin-left: constant(safe-area-inset-left);     margin-left: env(safe-area-inset-left);    }    .iphonex-mr{     margin-right: constant(safe-area-inset-right);     margin-right: env(safe-area-inset-right);    }    .iphonex-bd-top-bg{     border-top: 88px solid transparent;    }    .iphonex-bd-top{     border-top: 44px solid transparent;    }    .iphonex-bd-bottom{     border-bottom: 34px solid transparent;    }}复制代码

还可以使用JS对机型进行判断，给底部增加安全区域的高度

var u = navigator.userAgent; var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if(screen.height == 812 && screen.width == 375 || screen.height == 896 && screen.width == 414){    //判断iPhone X和XR    $(".phonex-pb").css("padding-bottom","34px"); }复制代码

10.虚拟键盘落下时，页面底部会出现键盘大小的灰色区域

PS：ios12微信内部浏览器中这种情况最明显

对页面的输入框进行失去焦点事件进行监听，当失去焦点的时候，让页面滚动回去，可以解决此问题

document.body.addEventListener('blur', function (e) {        window.scrollTo(0, 0)    }, true);复制代码

position:fixed使底部栏固定在底部会出现样式问题，建议使用position:abdolute，需要注意的是，如果父元素使用flex布局，子元素使用position:absolute样式会出现问题。

移动端的上中下三栏布局，推荐两种方法

（1）flex布局

html,body{    height:100%;}.father{    display:flex;    flex-direction:column;}.top,.bottom{    height:40px;}.center{    flex:1;    width:100%;}复制代码

(2)position:absolute方案

html,body{    height:100%;}.top,.bottom{    height:40px;}.top{    position:absolute;    top:0;    left:0;    width:100%;}.footer{    position:absolute;    bottom:0;    left:0;    width:100%;}.center{    position:absolute;    z-index:-1;    top:40px;    bottom:40px;    left:0;    width:100%;}复制代码

其中的center部分可以使用calc()计算属性来计算高度

.center{    *{            padding:0;            margin:0;        }        .father{            width:100%;            height:100%;        }        .top{            position: absolute;            left:0;            width: 100%;            top:0;            height:40px;            background:red;        }        .bottom{            position: absolute;            left:0;            width: 100%;            bottom:0;            height:40px;            background:blue;        }        .center{            width:100%;            height:calc(100vh - 80px);            background:yellow;            margin-top:40px;            margin-bottom:40px;            overflow:auto;        }        //隐藏滚动条        .center::-webkit-scrollbar{            display:none;        }}复制代码

PS：移动端布局强烈推荐统一使用flex布局，上中下三栏布局可以解决很多样式问题。

目前遇到的问题就这么多，遇到其他的之后再进行整理。

以上。