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

本文主要探讨了移动端开发中常见的兼容性问题,包括父元素使用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);
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值