关于适配手机浏览器 safe-area 几点体会 (Blazor/MauiBlazor/H5)

话不多说, 先上代码

下面是一个适配手机浏览器 safe-area 的测试 HTML 页面，包含如下特性：

• 顶部标题栏，支持 safe-area-inset-top，上滑时自动隐藏，下滑时显示。
  
• 中间部分为最大宽度 800px 的滚动列表，超出自动显示滚动条。
  
• 底部有两个导航按钮，固定在底部，支持 safe-area-inset-bottom。
  
• 响应式布局，适配手机和桌面。
  

1.         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，让内容始终显示在安全区域内。
  

1. 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;，只让列表滚动。
  

1. 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 的高度会自动适配，不会被遮挡

1. [/code][size=4]iOS 下滚动不到底部元素[/size]
3. 主要原因如下：
4. [list=1]
5. [*]env(safe-area-inset-top/bottom) 取值问题
6. 在 iOS Safari 下，env(safe-area-inset-top) 和 env(safe-area-inset-bottom) 只有在“全屏模式”或“PWA模式”下才会有非零值，普通网页通常为 0px。
7. 如果你用 calc(56px + env(safe-area-inset-top))，但 env(safe-area-inset-top) 实际为 0px，布局没问题；但如果为 44px（如 iPhone X 刘海屏），顶部和底部的可用空间会变小，导致 Content 区域高度变小，列表内容被遮挡，无法滚动到底部。
8. [*]fixed 定位遮挡内容
9. Header 和 .footer 都是 position: fixed，会覆盖页面内容。如果 Content 区域高度计算不准确，最后一项会被 .footer 遮住，无法滚动到可视区。
10. [*]iOS Safari 滚动兼容性
11. iOS Safari 对 overflow: hidden、position: absolute、height: 100% 等组合有兼容性问题，可能导致滚动区域高度计算异常。
12. [/list]推荐修正方案：
13. [list=1]
14. [*]建议用 JS 动态计算高度
15. 用 JavaScript 获取 Header 和 .footer 的实际高度，再动态设置 Content 的 Top 和 Bottom，确保滚动区域高度准确。
16. [*]或直接用 flex 布局
17. 用 flex 布局让 Content 自动填满中间区域，避免绝对定位和高度计算问题。
18. [/list][code]

复制代码

• Header 和 .footer 用 position: sticky，不遮挡内容，flex布局自动撑开中间区域。
  
• Content 用 flex 自动填满剩余空间，.list-container 高度为 100%，滚动条正常。
  
• 这样 iOS 下最后一项能正常滚动到可视区。
  

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

鼓励转贴优秀软件安全工具和文档！