刘海屏安全区域适配后底部内容还是被遮挡怎么办？

百里英旭提问于 2026-02-15 19:36:27 阅读 9

移动

最近在适配移动端页面时遇到个问题，全屏轮播图在iPhone 13上底部文字总被刘海屏遮住一部分。按照网上的方法加了，然后用CSS写了个


.content {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

但测试发现华为P50 Pro的底部黑边反而变宽了，而且部分Android机显示不对齐。折腾了一下午试过各种方案，用calc计算高度也不行，直接加固定像素padding又适配不了不同机型，有没有更好的解决办法啊？

viewport 移动端开发

我来解答赞 3 收藏

反馈

1 条解答

红梅🍀 Lv1

这个问题的关键在于不同机型对安全区域的处理方式不太一样，尤其是Android和iOS的差异。你现在的写法其实方向是对的，但可以优化成更通用的方案。

首先，constant() 已经被废弃了，现代浏览器基本都支持 env()，所以可以直接去掉 constant() 那一行。另外，问题的根本原因可能是没有正确设置视口的元信息，导致部分设备对安全区域的计算不准确。确保你的HTML里有这么一行：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

接下来，CSS可以调整成这样：

.content {

  padding-bottom: env(safe-area-inset-bottom, 0);

}

这里加了个默认值 0，避免在不支持 env() 的设备上出现意外情况。

如果你发现某些Android机型底部黑边变宽，可能是因为这些设备的安全区域本身就有问题，这时候可以通过媒体查询单独处理。比如：

@supports (padding-bottom: env(safe-area-inset-bottom)) {

  .content {

    padding-bottom: env(safe-area-inset-bottom);

  }

}

这样可以确保只有支持 env() 的设备才会应用这个样式。

最后再吐槽一句，适配刘海屏真的挺烦的，尤其是Android厂商各种自定义实现，搞得人头大。不过按上面的方案应该能解决大部分问题了。如果还有特殊情况，可能需要结合JS动态计算底部高度来兜底。

2026-02-15 22:48