移动端常见问题解决方案（position:fixed失效、overflow:auto导致滚动不流畅、input获得焦点软键盘弹出时position:fixed的footer遮挡内容区域等）

最新推荐文章于 2023-07-30 11:54:07 发布

原创最新推荐文章于 2023-07-30 11:54:07 发布 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

前端项目常见问题总结专栏收录该内容

16 篇文章

订阅专栏

本文主要探讨了移动端开发中常见的兼容性问题，包括父元素使用transform导致子元素position:fixed失效、加overflow:auto导致滚动不流畅、软键盘弹出遮挡内容区域及iOS设备输入框默认内阴影等问题，并提供了具体的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端兼容性问题

1.父元素使用了transform，子元素position:fixed失效的问题

问题描述：我的页面中有个这样的需求，点击定位，页面从右向左拉出一个菜单，覆盖整个屏幕，这个滑动效果我是用transform写的，可以选择省，但是上面当前位置和取消所占的一行要求position:fixed，下面的省可以滚动，效果如下图：
在这里插入图片描述
结果就是position:fixed失效了，因为他的父元素运用了transform

解决办法：改变布局，让需要position:fixed的元素变成transform元素的兄弟元素，而不是子元素，这样就解决了，如果有更好的解决办法，欢迎大家踊跃发言告知，在此感谢！

2.移动端加了overflow:auto导致滚动不流畅的问题

问题描述：不知道大家开发移动端的过程中有没有需要加overflow-x:hidden;overflow-y:auto;类似这种的情况，加了以后发现滚动变得不流畅了。

解决办法：只需要给你加了overflow:auto的标签（例如class=“list”）加上一个神奇的css属性即可：

.list{
    -webkit-overflow-scrolling:touch;
}

3.input获得焦点软键盘弹出时，position:fixed的footer遮挡内容区域的问题

问题描述：页面中footer是position:fixed的，页面中的input获得焦点，软键盘弹起后，我希望footer隐藏，避免遮挡内容区域。

解决办法：针对ios型号设备，可以通过input获得焦点还是失去焦点来判断，因为ios型号设备软键盘收起时，input会自动失去焦点，而安卓却不一定，安卓必须是点击页面的其他地方，input才会失去焦点，而直接点击软键盘上的完成或者关闭按钮，input不会失去焦点，所以针对安卓，需要使用resize方法，因为对于安卓设备来说，软键盘的弹出和收起，都会触发resize方法。

//ios
$("input").bind("focus", function(){
    $("footer").hide();
}).bind("blur", function(){
    $("footer").show();
})

//安卓
var windowHeight = $(window).height();
$(window).resize(function(){
    var nowHeight = $(window).height();
    if(nowHeight < windowHeight){  //说明软键盘弹出
        $("footer").hide();
    }else{  //软键盘收起
        $("footer").show();
    }
})

4.ios型号设备下输入框默认内阴影

解决办法：

input {
	-webkit-appearance: none; 
}

移动端弹层水平垂直居中方法

.layer{
    position: fixed;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

动画效果

1.移动端弹层从右往左划出效果CSS实现

.layer{
    position: fixed;
    right: 0;
    top: 0;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
.layer.in{
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

2.移动端弹层从下往上划出效果CSS实现

.layer{
    position: fixed;
    bottom: 0;
    left: 0;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
.layer.in{
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
}