解决Iphonex 底部按钮fixed,bottom:0 底部留白问题

最新推荐文章于 2025-06-25 20:49:23 发布

原创最新推荐文章于 2025-06-25 20:49:23 发布 · 6.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#iphonex 底部按钮fixed留白

问题记录专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种适用于iPhone X系列设备的全屏布局解决方案，通过特定的CSS和HTML结构调整，确保页面内容与底部固定按钮在不同屏幕尺寸下正确显示。针对iPhone X、iPhone Xs、iPhone Xs Max和iPhone XR进行了详细说明。

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

注意:
配合viewport-fit=“cover”使用

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1, user-scalable=0,viewport-fit=cover">

解决方案：

<div class="wrapper">
    <div class="main-wrapper">我是中间区域</div>
    <div class="btn-wrapper">我是fixed按钮</div>
</div>
// css 区域
.wrapper{
    position: relative;
    padding-bottom: 100px;
    box-sizing: border-box;
}
.main-wrapper{
    overflow: auto;
}
.btn-wrapper{
    width: 100%;
    height: 100px;
    position: fixed;
    left: 0;
    bottom: 0;
}
// iphonex 系列 需增加样式
//iphoneX、iphoneXs
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .wrapper{
        height: 100vh;
        overflow: hidden;
    }
    .main-wrapper{
        height: 100%;
    }
}
//iphone Xs Max
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {
    .wrapper{
        height: 100vh;
        overflow: hidden;
    }
    .main-wrapper{
        height: 100%;
    }
}
//iphone XR
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {
    .wrapper{
        height: 100vh;
        overflow: hidden;
    }
    .main-wrapper{
        height: 100%;
    }
}