关于适配手机浏览器 safe-area 几点体会 (Blazor/MauiBlazor/H5)
话不多说, 先上代码下面是一个适配手机浏览器 safe-area 的测试 HTML 页面，包含如下特性：
[*]顶部标题栏，支持 safe-area-inset-top，上滑时自动隐藏，下滑时显示。
[*]中间部分为最大宽度 800px 的滚动列表，超出自动显示滚动条。
[*]底部有两个导航按钮，固定在底部，支持 safe-area-inset-bottom。
[*]响应式布局，适配手机和桌面。
https://img2024.cnblogs.com/blog/1980213/202601/1980213-20260114023043401-909404702.png
SafeArea 测试页 SafeArea 测试页 列表项 1 列表项 2 列表项 3 列表项 4 列表项 5 列表项 6 列表项 7 列表项 8 列表项 9 列表项 10 列表项 11 列表项 12 列表项 13 列表项 14 列表项 15 列表项 16 列表项 17 列表项 18 列表项 19 列表项 20 首页 我的 说明：
[*]使用了 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; /* 禁止页面滚动条 */}这样，只有 .list-container 会出现滚动条，页面不会再有双滚动条现象。
补充说明：
[*]如果页面有弹窗、下拉菜单等需要页面滚动，可以在弹窗打开时临时移除 overflow: hidden。
[*]这种方式适合“单区域滚动”场景，常用于移动端全屏页面。
流布局
将 Content 设置为绝对定位，并让其顶部和底部分别与 Header 和 .footer 对齐，这样 .list-container 的高度会自动适配，不会被遮挡
iOS 下滚动不到底部元素
主要原因如下：
[*]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% 等组合有兼容性问题，可能导致滚动区域高度计算异常。
推荐修正方案：
[*]建议用 JS 动态计算高度
用 JavaScript 获取 Header 和 .footer 的实际高度，再动态设置 Content 的 Top 和 Bottom，确保滚动区域高度准确。
[*]或直接用 flex 布局
用 flex 布局让 Content 自动填满中间区域，避免绝对定位和高度计算问题。
[*]Header 和 .footer 用 position: sticky，不遮挡内容，flex布局自动撑开中间区域。
[*]Content 用 flex 自动填满剩余空间，.list-container 高度为 100%，滚动条正常。
[*]这样 iOS 下最后一项能正常滚动到可视区。
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ 鼓励转贴优秀软件安全工具和文档！ 前排留名，哈哈哈 感谢发布原创作品，程序园因你更精彩 感谢分享 懂技术并乐意极积无私分享的人越来越少。珍惜 感谢发布原创作品，程序园因你更精彩 过来提前占个楼 yyds。多谢分享 东西不错很实用谢谢分享 东西不错很实用谢谢分享 不错，里面软件多更新就更好了 东西不错很实用谢谢分享 这个好，看起来很实用 鼓励转贴优秀软件安全工具和文档！ 懂技术并乐意极积无私分享的人越来越少。珍惜 感谢，下载保存了 用心讨论，共获提升！ yyds。多谢分享 感谢分享，学习下。
页:
[1]
2