底部导航必须将 env(safe-area-inset-bottom) 应用于直接父容器，使用 padding-bottom 最稳妥；grid 列数不稳定主因是容器未设 width: 100%；触控热区需真实盒模型撑开，禁用 display: contents；grid-template-areas 应仅在媒体查询内定义。
底部导航必须避开 iPhone 刘海和 Home Indicator
直接写 bottom: 0 在 iOS 上会遮住 Home Indicator，用户滑动返回时失灵；不处理 safe-area-inset-bottom，导航项可能被截断或点击失效。正确做法是用 padding-bottom 或 margin-bottom 预留安全区，而不是靠定位硬压。
关键不是“怎么加 safe-area”，而是“加在谁身上”：必须加在底部导航的**直接父容器**（比如 footer 或 .bottom-nav），而不是导航项内部或 body 上——否则 gap、对齐、触控热区全乱。
- 用
padding-bottom: env(safe-area-inset-bottom)最稳妥，iOS 和 Android WebView 都识别 - 别用
calc(100vh - env(safe-area-inset-bottom))做高度计算，滚动时视口高度会变，导致布局跳动 - 如果导航本身是
position: fixed，需同时设bottom: env(safe-area-inset-bottom)，但要小心 Safari 15.4 以下版本不支持env()在bottom中
Grid 列数动态收缩时 auto-fit + minmax 失效？检查容器 width
常见现象：手机横屏能显示 5 个图标，竖屏却只显示 2 个还留大片空白——不是 auto-fit 不工作，而是父容器没设 width: 100%，Grid 按内容宽度（比如文字撑开的宽度）计算轨道，不是按屏幕宽度。
移动端 Grid 导航列数不稳定，90% 是因为容器宽度失控。尤其当底部导航嵌在 position: fixed 的 wrapper 里时，wrapper 默认 width 是 auto，不是 100%。
- 给导航容器加
width: 100%; max-width: 100%，双保险 -
grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)))中的72px是 iOS 推荐最小触控宽度（含 padding），低于此值就换行 - 若需兼容 iOS 13（如企业内网场景），改用
auto-fill+max-width限制列数，例如：grid-template-columns: repeat(auto-fill, minmax(72px, 1fr))); max-width: 360px;
导航项点击区域小、误触多？别只靠 grid-area 占位
Grid 只管位置，不管热区。很多团队写了 grid-column: 1 / -1 就以为按钮铺满整行，结果手指一点就点到空白处——因为 a 标签自身没尺寸，display: contents 或 font-size: 0 还会让热区消失。
触控热区必须由元素盒模型真实撑开，不能靠 Grid “视觉占位”。
- 每个导航项必须设
min-height: 44px（iOS）或48px（Android 推荐），再加padding: 0.5rem 0.75rem - 禁用
display: contents包裹a—— 它会让元素不生成盒，热区归零 - 用
touch-action: manipulation加速响应，避免 300ms 延迟；cursor: pointer辅助桌面端识别 - 别依赖
align-items: center居中文字——优先用display: flex; align-items: center; justify-content: center控制单个项内部对齐
为什么 grid-template-areas 在手机上突然错位？检查媒体查询时机
最隐蔽的坑：你在默认样式里写了 grid-template-areas: "home search user"，然后在 @media (max-width: 768px) 里改成 "home" "search" "user"。但 Safari 会先渲染默认规则，再重排——中间有几十毫秒所有项挤在第一行，造成闪动甚至错位。
问题不在语法，而在“什么时候生效”。Grid 区域名一旦定义，就会参与隐式网格生成；错名、漏名、重复名都可能导致静默降级为 auto-flow，你根本看不到报错。
- 移动端布局必须从
@media内部开始定义，**默认样式里不要写grid-template-areas** - 用 CSS Grid Inspector（Safari 开发者工具里那个网格图标）实时看轨道线，比肉眼判断靠谱十倍
- 区域名拼错时，控制台不会报错，但对应元素会 fallback 到
grid-auto-flow: row，顺序错乱——查grid-column值是否变成auto就能确认
真正难的不是写出能跑的 Grid，而是让每一行 env()、minmax()、grid-area 都在不同机型上稳定生效。尤其当 safe-area 和动态列数叠加时，一个没设 max-width 或漏了 touch-action，整套导航就在某些设备上哑火。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
