话不多说, 先上代码
下面是一个适配手机欣赏器 safe-area 的测试 HTML 页面，包罗如下特性：
- 顶部标题栏，支持 safe-area-inset-top，上滑时自动埋伏，下滑时表现。
- 中央部分为最大宽度 800px 的滚动列表，超出自动表现滚动条。
- 底部有两个导航按钮，固定在底部，支持 safe-area-inset-bottom。
- 相应式布局，适配手机和桌面。
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8" />
- <title>SafeArea 测试页</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
-
- </head>
- <body>
- SafeArea 测试页
-
-
-
- 列表项 1
- 列表项 2
- 列表项 3
- 列表项 4
- 列表项 5
- 列表项 6
- 列表项 7
- 列表项 8
- 列表项 9
- 列表项 10
- 列表项 11
- 列表项 12
- 列表项 13
- 列表项 14
- 列表项 15
- 列表项 16
- 列表项 17
- 列表项 18
- 列表项 19
- 列表项 20
-
-
-
- <button type="button" onclick="alert('首页')">首页</button>
- <button type="button" onclick="alert('我的')">我的</button>
-
-
- </body>
- </html>
- 利用了 env(safe-area-inset-*) 适配 iPhone 刘海屏等安全地区。
- 标题栏通过监听列表滚动自动埋伏/表现。
- 列表最大宽度 800px，超出自动滚动。
- 底部按钮始终固定，适配安全区。
- 可直接在手机欣赏器或桌面欣赏器中测试。
safe-area-inset-top:
env(safe-area-inset-top) 是一种 CSS 环境变量，用于适配 iPhone 等带有刘海或圆角屏幕的装备的“安全地区”（Safe Area）。
作用分析：
- 在 iOS Safari 欣赏器中，env(safe-area-inset-top) 表现页面顶部的安全间隔（像素值），用于制止内容被刘海、状态栏遮挡。
- 比方 iPhone X 及以上机型，顶部有刘海，env(safe-area-inset-top) 通常为 44px，平凡装备则为 0px。
- 你可以用它为顶部、底部、左侧、右侧设置符合的 padding 或 margin，让内容始终表如今安全地区内。
- body {
- padding-top: env(safe-area-inset-top);
- padding-bottom: env(safe-area-inset-bottom);
- }
- env(safe-area-inset-top)：顶部安全区
- env(safe-area-inset-bottom)：底部安全区
- env(safe-area-inset-left)：左侧安全区
- env(safe-area-inset-right)：右侧安全区
实用场景：
- 移动端 Web 页面，尤其是全屏、沉醉式布局时，确保内容不会被装备的物理布局遮挡。
注意：
- 只有在支持安全区的装备和欣赏器（如 iOS Safari）中才有效，其他环境下为 0px。
- 需在 下利用，才气收效。
手机端双滚动条
出现手机端双滚动条，通常是由于 Body 和内部某个容器（如 .list-container）都设置了 overflow 或高度，导致两层都可以滚动。比方：
- Body 利用了 flex 布局和 min-height: 100vh，但没有显式限定 overflow，默认会根据内容溢出滚动。
- .list-container 设置了固定高度（height: calc(100vh - ... )）和 overflow-y: auto，自身也会出现滚动条。
- 假如 .list-container 内容高度高出其自身高度，同时整个页面内容高出视口高度，欣赏器会同时表现页面和容器的滚动条。
办理方法：只让 .list-container 滚动，克制 Body 滚动：
- 设置 body, html 的 overflow: hidden;，防止页面团体滚动。
- 保持 .list-container 的 overflow-y: auto;，只让列表滚动。
- html, body {
- height: 100%;
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- background: #f8f9fa;
- overflow: hidden; /* 禁止页面滚动条 */
- }
增补分析：
- 假如页面有弹窗、下拉菜单等须要页面滚动，可以在弹窗打开时暂时移除 overflow: hidden。
- 这种方式恰当“单地区滚动”场景，常用于移动端全屏页面。
流布局
将 Content 设置为绝对定位，并让其顶部和底部分别与 Header 和 .footer 对齐，如许 .list-container 的高度会自动适配，不会被遮挡- [/code][size=4]iOS 下滚动不到底部元素[/size]
- 紧张缘故起因如下：
- [list=1]
- [*]env(safe-area-inset-top/bottom) 取值标题
- 在 iOS Safari 下，env(safe-area-inset-top) 和 env(safe-area-inset-bottom) 只有在“全屏模式”或“PWA模式”下才会有非零值，平凡网页通常为 0px。
- 假如你用 calc(56px + env(safe-area-inset-top))，但 env(safe-area-inset-top) 实际为 0px，布局没标题；但假如为 44px（如 iPhone X 刘海屏），顶部和底部的可用空间会变小，导致 Content 地区高度变小，列表内容被遮挡，无法滚动到底部。
- [*]fixed 定位遮挡内容
- Header 和 .footer 都是 position: fixed，会覆盖页面内容。假如 Content 地区高度盘算不正确，末了一项会被 .footer 遮住，无法滚动到可视区。
- [*]iOS Safari 滚动兼容性
- iOS Safari 对 overflow: hidden、position: absolute、height: 100% 等组合有兼容性标题，大概导致滚动地区高度盘算非常。
- [/list]保举修正方案：
- [list=1]
- [*]发起用 JS 动态盘算高度
- 用 JavaScript 获取 Header 和 .footer 的实际高度，再动态设置 Content 的 Top 和 Bottom，确保滚动地区高度正确。
- [*]或直接用 flex 布局
- 用 flex 布局让 Content 自动填满中央地区，制止绝对定位和高度盘算标题。
- [/list][code]
- Header 和 .footer 用 position: sticky，不遮挡内容，flex布局自动撑开中央地区。
- Content 用 flex 自动填满剩余空间，.list-container 高度为 100%，滚动条正常。
- 如许 iOS 下末了一项能正常滚动到可视区。
免责声明：如果侵犯了您的权益，请联系站长及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金. |
发表于 2026-1-14 00:44:41
