viewport-fit=cover必须与width=device-width、initial-scale=1.0同时使用，否则浏览器忽略并回退到auto；需双写constant()和env()且前者在前，fixed元素避让必须用padding而非margin。
viewport-fit=cover 必须和 width=device-width 同时出现
单独写 viewport-fit=cover 不起作用。浏览器会直接忽略它，退回到 viewport-fit=auto（等价于 contain）。根本原因是：layout viewport 宽度没被设为设备逻辑像素宽度，viewport-fit 就失去了作用基础。
常见错误写法：<meta name="viewport" content="viewport-fit=cover">
正确写法必须包含：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-
width=device-width强制 layout viewport 等于屏幕逻辑宽度（如 iPhone 14 Pro 是 430px），这是后续所有缩放、安全区计算的前提 -
initial-scale=1.0必须搭配width=device-width才生效；否则在多数安卓 WebView 中会被静默忽略 - 避免混用已废弃的
target-densitydpi，它会直接让浏览器跳过viewport-fit解析
env() 和 constant() 必须共存且顺序不能错
iOS 11.0–11.1 只识别 constant()，iOS 11.2+ 及现代 Chrome/Safari 只认 env()。只写其中一个，必然漏兼容。
错误写法：padding-bottom: constant(safe-area-inset-bottom); → iOS 12+ 和 Android Chrome 直接忽略padding-bottom: env(safe-area-inset-bottom); → iOS 11.0–11.1 不生效
正确写法是两条独立声明，constant() 在前：padding-bottom: constant(safe-area-inset-bottom, 0px);padding-bottom: env(safe-area-inset-bottom, 0px);
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
env()返回的是长度值（如34px），不能直接参与calc(100vh - env())—— 会解析失败，必须写成calc(100vh - env(safe-area-inset-bottom)) - 推荐用
@supports (padding-top: env(safe-area-inset-top))做渐进增强，避免旧 WebView 报 CSS 解析错误
fixed 元素避让必须用 padding，不是 margin
给吸底的 tabbar 或操作栏加 margin-bottom 看似合理，但无效——margin 不撑开父容器，内容仍可能溢出到非安全区；只有 padding 能真正预留可显示空间。
错误做法：.tabbar { position: fixed; bottom: 0; margin-bottom: env(safe-area-inset-bottom); }
正确做法：.tabbar { position: fixed; bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); padding-bottom: constant(safe-area-inset-bottom, 0px); }
- 对吸底元素本身设
padding-bottom，而非对其父容器设margin-bottom - 顶部适配同理：对
或根容器设padding-top: constant(safe-area-inset-top, 0px); padding-top: env(safe-area-inset-top, 0px); - 微信小程序内嵌 H5 中，
viewport-fit=cover在 8.0.33+ 版本才稳定生效；7.x 早期版本会静默回退到auto
env() 值不能直接用于 calc() 表达式中
env(safe-area-inset-bottom) 是一个 CSS 环境变量，不是数值，不能直接参与算术运算。写成 calc(100vh - env(safe-area-inset-bottom)) 是合法的，但 calc(100vh - env()) 会报错。
- 必须完整写出变量名：
calc(100vh - env(safe-area-inset-bottom)) - 不能省略单位，
env()返回值自带单位（如34px），无需额外补px - 部分安卓 WebView 对
viewport-fit=cover支持不一致，建议用@supports包裹关键样式做降级处理
实际项目里最容易被忽略的，是 env() 的单位隐含性和 viewport-fit=cover 的依赖链：缺了 width=device-width，整个适配就断在第一步；写了 env() 却没配 constant()，老 iOS 就白忙活；用了 margin 代替 padding，底部按钮照样被遮。这些点环环相扣，漏一个，全盘失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
