iPhone X+ 系统中 fixed 头部被刘海遮挡，需用 top: env(safe-area-inset-top) 适配安全区域，并配合 viewport-fit=cover 元标签及兼容写法 top: constant() 和 top: 0。iPhone X+ 系统里 position: fixed 头部被刘海/圆角遮挡这是 Safari 和 iOS WebKit 的老问题：顶部 fixed 元素默认紧贴视口顶部（top: 0），但 iPhone X 及后续机型的「安全区域」（safe area）顶部有物理遮挡（刘海、传感器区域），导致内容被裁切。根本原因不是 CSS 写错了，而是浏览器没把「安全区域」边界当默认布局参考------它只认 viewport 高度，不自动避开刘海。必须显式用 env(safe-area-inset-top) 或 constant(safe-area-inset-top) 补出顶部空隙constant() 是旧版 iOS 11.0--11.2 的写法，已废弃但还得兼容；env() 是 iOS 11.2+ 标准，必须用不能只加 padding-top：固定头部需要的是「上移整个元素」，所以优先改 top 值如何正确设置 top 适配安全区域直接在 fixed 头部的样式里用 env() 替代固定数值，让浏览器动态计算顶部偏移量。示例：立即学习"前端免费学习笔记（深入）"；header { position: fixed; top: env(safe-area-inset-top); /* iOS 自动填值，如 44px */ top: constant(safe-area-inset-top); /* 降级，iOS 11.0--11.2 */ top: 0; /* 最终降级，所有其他设备 */ width: 100%; height: 44px;}顺序很重要：CSS 会按从下到上的顺序覆盖，所以 top: 0 放最后，确保无支持时 fallback 到默认行为不要写成 top: calc(env(safe-area-inset-top) + 44px)：这会让头部整体下移太多，实际高度变成「安全区空隙 + 自身高度」，视觉错位如果头部本身带背景或阴影，记得检查 env(safe-area-inset-top) 是否为 0（如安卓或桌面端），此时不应多出空白为什么加了 env() 还是被截？检查这三点常见失效不是语法问题，而是配套配置没跟上。 稿定AI 拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能
相关推荐
2501_913061342 小时前
JVM虚拟机——面试中的八股文weixin_458580122 小时前
golang如何优化反射性能_golang反射性能优化技巧深蓝海拓2 小时前
Qt：创建一套基于HSL颜色体系的颜色库步辞2 小时前
CSS如何解决小屏幕上的长单词截断版面Thanks_ks2 小时前
【第 001 讲】计算机底层基础与 Python 生态全景：硬件架构 | 语言演进 | 执行机制 | 语言特性 | 解释器 | 版本策略qq_460978402 小时前
如何在无向图中找出从任意节点可达的所有节点（连通分量识别）reasonsummer2 小时前
【教学类-160-12】20260420 AI视频培训-练习012“豆包AI视频《和歌浮世绘》+豆包图片风格：无（关键词：浮世绘）”卡西里弗斯奥2 小时前
【海量数据库】权限管理实操版大蚂蚁2号2 小时前
本地视频转文字|video2text