怎样在Bootstrap项目中利用CSS环境变量适配苹果刘海屏-css教程-PHP中文网

必须添加viewport-fit=cover，否则env(safe-area-inset-top/bottom)返回0px；需在meta中完整书写width=device-width, initial-scale=1.0, viewport-fit=cover，且不可被覆盖或动态修改。

怎样在bootstrap项目中利用css环境变量适配苹果刘海屏

viewport-fit=cover 必须加，少一个字都不行

Bootstrap 页面在 iPhone 刘海屏上顶部被切、底部小黑条盖住，根本原因不是 Bootstrap 没适配，而是 viewport-fit=cover 缺失——没有它，env(safe-area-inset-top) 和 env(safe-area-inset-bottom) 全部返回 0px，CSS 里写一百遍也白搭。

必须确保 HTML 中有且仅有一条完整、未被覆盖的 meta 标签：

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

initial-scale=1.0 不能省，iOS Safari 依赖它才启用 env() 函数
必须和 width=device-width 写在同一行，分拆、JS 动态重写、SSR 模板抹除都会导致失效
用 PWA 或 WebView 加载时，检查控制台 Elements 面板，确认该 meta 真实存在且未被第三方 SDK 覆盖
微信内置浏览器（X5 内核）不支持 viewport-fit=cover，真机调试别信模拟器，直接用 Safari 连真机看 getComputedStyle(document.body).getPropertyValue('padding-top')

.fixed-top 被刘海盖住？别加 padding-top

Bootstrap 的 .fixed-top 是 position: fixed; top: 0，对它设 padding-top 完全无效——padding 是内容内部空间，动不了定位位置。你看到的“留白”其实是 body 下移，导航栏反而更靠近顶部，被刘海切得更狠。

正确做法是改 top 偏移量，并用 @supports 包裹防低版本崩溃：

@supports (padding-top: env(safe-area-inset-top)) {
  .fixed-top {
    top: env(safe-area-inset-top);
  }
}

不要写 @supports (env(safe-area-inset-top))——语法非法，整块 CSS 被浏览器忽略
不要混用 constant()：Safari 15+ 已彻底移除，留着只会让维护变复杂
如果导航栏有背景色或阴影，注意 env(safe-area-inset-top) 在 iPhone 8 等直屏设备上是 0px，不会多出意外空白
别在 Vue/React 的 style={{ top: 'env(safe-area-inset-top)' }} 里硬塞——JS 不解析 CSS 函数，只当字符串透传，浏览器收不到

.container-fluid 底部被小黑条盖住？用 inset 或 bottom 替代 padding-bottom

Bootstrap 的 .container-fluid 本身不处理安全区，但如果你在它里面放了 position: fixed; bottom: 0 的 tabbar，padding-bottom: env(safe-area-inset-bottom) 一样无效——fixed 元素脱离文档流，padding 对它没影响。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

真正起作用的是控制其定位边界：

.tabbar {
  position: fixed;
  bottom: env(safe-area-inset-bottom);
  /* 或更稳妥的 inset 写法 */
  inset: auto 0 env(safe-area-inset-bottom) 0;
}

bottom 值必须带单位：env(safe-area-inset-bottom, 0px)，漏掉 px 会失效
iPhone 竖屏时 env(safe-area-inset-bottom) 通常是 34px（Home Indicator 高度），横屏可能为 0，值是动态的，别当死数记
如果用了 z-index，确保 tabbar 层级高于 Safari 地址栏，否则仍可能被系统 UI 盖住
避免在 height: 100vh 容器里叠加 padding-bottom——滚动时 100vh 会变化，导致底部错位