HTML meta的viewport-fit属性？刘海屏手机全屏适配方案-html教程-PHP中文网

viewport-fit=cover是ios safari（11.2+）中允许网页内容渲染到安全区外的必要声明，必须与width=device-width、initial-scale=1.0共存才生效；不加则页面被强制限制在安全区内，导致顶部留白、底部按钮被home indicator遮挡。

html meta的viewport-fit属性？刘海屏手机全屏适配方案

viewport-fit=cover 是什么，为什么必须加

在 iOS 11+ 的刘海屏（如 iPhone X 及后续机型）上，viewport-fit=cover 是让网页内容真正延伸到屏幕顶部状态栏下方、底部安全区域外的必要声明。不加它，viewport 默认按 viewport-fit=auto 处理——系统会强制把网页“框”在安全区域内，顶部留白、底部被遮挡，尤其全屏类应用（WebGL、视频、PWA）会明显缩进。

它不是可选优化，而是 iOS 刘海屏下实现视觉“全屏”的基础开关。

viewport-fit=auto：默认值，内容不覆盖状态栏/Home Indicator 区域
viewport-fit=cover：允许内容渲染到整个物理屏幕，但需配合 env() 或 constant() 安全区变量做避让

怎么写 viewport meta 才生效

只写 viewport-fit=cover 不够，必须和 width=device-width 等基础参数共存，且顺序无关，但缺一不可。常见错误是漏掉 initial-scale=1 导致双击缩放异常，或用 user-scalable=no 锁死缩放却没处理横屏适配。

推荐写法：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

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

不能写成 viewport-fit: cover（冒号是 CSS 语法，meta 里用等号）
Android 设备忽略该属性，无副作用，可放心共用
仅 Safari（iOS/iPadOS）识别，Chrome for iOS 底层也是 WebKit，同样生效

env() 和 constant() 安全区变量怎么用

加了 viewport-fit=cover 后，页面会撑满，但状态栏、Home Indicator 下方的内容会被遮挡。必须用 env(safe-area-inset-top) 等 CSS 环境变量动态预留空间。注意：constant() 是 iOS 11.0–11.1 的旧写法，env() 是 iOS 11.2+ 的标准，二者需同时声明并用 calc() 回退。

典型用法（适配顶部状态栏）：

body {<br>  padding-top: env(safe-area-inset-top, 0px);<br>  padding-top: constant(safe-area-inset-top, 0px);<br>}

env(safe-area-inset-top) 返回状态栏高度（iPhone X 是 44px），刘海越深值越大
env(safe-area-inset-bottom) 对应 Home Indicator 高度（34px），常用于 fixed 底部按钮
必须搭配 viewport-fit=cover 才能读取到非零值；否则 env() 返回 0
不能直接在内联 style 中用 env()，只支持在 CSS 文件或 <style></style> 块中使用

全屏场景下的常见坑

做 PWA、游戏或沉浸式视频页时，容易忽略几个关键点：固定定位元素被截断、滚动容器未适配安全区、CSS 动画错位。

fixed 元素（如底部操作栏）要用 padding-bottom: env(safe-area-inset-bottom) 而非 margin-bottom，否则在滚动时可能错位
全屏 canvas 或 video，需设置 height: 100vh + padding-bottom: env(safe-area-inset-bottom)，再用 object-fit: cover 防拉伸
某些老版本 WebView（如微信内置 iOS 8.x）不支持 env()，需 JS 检测回退：if (window.CSS && CSS.supports('padding-top', 'env(safe-area-inset-top)')) { ... }
横屏时 safe-area-inset-left/right 生效，但多数 UI 不需要处理，除非有侧边栏或分屏需求