为何需要
按钮放在刘海等处会被遮挡或与手势冲突。Apple（n.d.）称之为安全区域，Android（Android Developers, n.d.）建议全面屏并处理插入值。
实现
使用viewport-fit=cover与env()（MDN, n.d.），固定底部按钮和底部导航要加上它；横屏也要检查（WCAG 2.2 1.3.4；W3C, 2023）。
布局与可及性
上移一点拇指仍够得到（Bergstrom-Lehtovirta & Oulasvirta, 2014），不要缩小触控目标（Parhi et al., 2006；Fitts, 1954）。
常见问题
- 区域外不能绘制吗？
- 背景可铺满，文字和按钮放内侧。
- env()为0？
- 需要viewport-fit=cover。
来源核查日期：2026-10-27
参考文献
- Apple. (n.d.). Layout. Human Interface Guidelines. iOS安全区域。
- MDN Web Docs. (n.d.). env(). Mozilla. CSS env()变量。
- Android Developers. (n.d.). Display content edge-to-edge in views. Android全面屏插入。
- Bergstrom-Lehtovirta, J., & Oulasvirta, A. (2014). Modeling the functional area of the thumb on mobile touchscreen surfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1991–2000). ACM. 底边附近的拇指范围。
- Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. 边缘目标尺寸。
- Fitts, P. M. (1954). The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 47(6), 381–391. 尺寸与距离定律。
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 1.3.4与1.4.10标准。