CSS如何适配移动端各种异形屏_结合calc函数与安全区域变量-css教程-PHP中文网

viewport-fit=cover是启用安全区变量的必要前提，必须在meta标签中显式声明；padding-bottom需按constant()在前、env()在后的顺序双写以兼容ios各版本；适配应使用padding而非margin，且calc()中避免rpx等非标准单位。

css如何适配移动端各种异形屏_结合calc函数与安全区域变量

不加这个，env(safe-area-inset-bottom) 和 constant(safe-area-inset-bottom) 全部无效——浏览器根本不会计算安全区值。很多页面写了 padding 却没效果，卡在这一步。

必须写成：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

注意：viewport-fit=cover 会让内容铺满物理屏幕，顶部/底部可能被遮挡。这不是 bug，是启用安全区变量的必要代价。别用 contain 或漏掉它。

微信小程序 WebView 默认是 cover，但 H5 页面必须显式声明
安卓 Chrome 76+、iOS Safari 11.0+ 支持 viewport-fit=cover；旧版 WebView（如 Android 4.4）会忽略该属性，但也不会报错
真机调试时，Safari 开发者工具里检查 document.documentElement.style，确认 viewport-fit 已生效

只写 env()，iOS 11.0–11.1 会失效；只写 constant()，iOS 11.2+ 及所有现代浏览器直接忽略。CSS 层叠规则决定了：后写的声明覆盖前一个，所以 constant() 必须在前，env() 在后。

正确写法：

body {
  padding-bottom: constant(safe-area-inset-bottom); /* iOS = 11.2, modern browsers */
}

错误写法（顺序颠倒）：

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

body {
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: constant(safe-area-inset-bottom); /* 这行永远不生效 */
}

不支持 env() 的浏览器（如旧版 Android WebView）会跳过整条声明，退回到上一条有效值；不支持 constant() 的则跳过第一行，用第二行
不能靠 UA 判断版本来条件加载样式——UA 字符串不可靠，且 iOS 11.2 beta 就已废弃 constant()
@supports 检测 env() 本身在 iOS 11.2 之前也不支持，所以双重声明是最小可行兼容方案

想让底部栏离屏幕底边留 8px，同时避开黑条，写成 padding-bottom: calc(8px + env(safe-area-inset-bottom)) 看似合理，但有陷阱。

env() 返回的是带单位的长度值（如 34px），和 8px 相加没问题；但如果你写成 calc(8rpx + env(safe-area-inset-bottom))，在非小程序环境（比如纯 H5）中 rpx 不被识别，整条声明会被丢弃。

用 margin-bottom: env(safe-area-inset-bottom) 推开整个页面内容？结果手指上滑时底部按钮突然“掉进”黑条下方看不见——这是典型误用。

margin 会扩大容器的可滚动区域，而 padding 是在容器内部留空，不改变滚动边界。安全区适配的本质是「内容避让」，不是「整体位移」。

对 <footer></footer>、<main></main> 这类容器，一律用 padding-bottom
对 position: fixed; bottom: 0 的 tabbar，用 bottom: calc(env(safe-area-inset-bottom) + 8px)，而不是 margin-bottom
绝对定位元素（position: absolute）优先用 inset 或 bottom: calc(...)，避免设 bottom: 0 后再靠 margin 补救