Can nothing be drawn outside the safe area?

Backgrounds and images can extend to the edge; only readable and tappable content must stay inside.

Why does env() return 0 on the web?

The viewport meta tag needs viewport-fit=cover for real inset values.

Safe Area Insets

⚙️ Engineering & Technology By CampusDown Wiki Editorial Team Last updated October 27, 2026

The safe area is the screen region not obscured by a device's notch, rounded corners or system bars, where content and buttons can be placed safely.

Contents

1. Why safe areas matter
2. Implementing on web and apps
3. Placement and reach
4. FAQ
5. References

Why safe areas matter

Phones have notches or camera cut-outs, rounded corners and home indicators; buttons placed there get hidden or clash with system gestures. Apple (n.d.) calls the clear region the safe area, and Android (Android Developers, n.d.) recommends drawing edge-to-edge while insetting content by system bar insets. Backgrounds go to the edge; content and buttons stay inside.

Implementing on web and apps

On the mobile web add viewport-fit=cover and pad with env(safe-area-inset-bottom) (MDN, n.d.). Sticky bottom buttons and bottom navigation must add this value. In landscape the notch moves sideways, creating side insets, so test both orientations as WCAG 2.2 (W3C, 2023) 1.3.4 implies.

Placement and reach

Insets lift bottom buttons slightly, still comfortably within thumb reach (Bergstrom-Lehtovirta & Oulasvirta, 2014). Don't shrink buttons to compensate; keep touch target sizes (Parhi et al., 2006), since smaller targets are harder (Fitts, 1954). Test across real devices and simulators.

FAQ

Can nothing be drawn outside the safe area?: Backgrounds and images can extend to the edge; only readable and tappable content must stay inside.
Why does env() return 0 on the web?: The viewport meta tag needs viewport-fit=cover for real inset values.

Sources reviewed: 2026-10-27

References

Apple. (n.d.). Layout. Human Interface Guidelines. iOS safe areas.
MDN Web Docs. (n.d.). env(). Mozilla. CSS env() safe-area variables.
Android Developers. (n.d.). Display content edge-to-edge in views. Android edge-to-edge insets.
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. Thumb reach near the bottom edge.
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. Target size near edges.
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. Size and distance costs.
World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. Criteria 1.3.4 and 1.4.10.

Reports and materials that use this theory (Korean)

There are no materials dedicated to this theory yet, but you can search related reports in the CampusDown library (Korean).

Find more reports · Search '세이프 에어리어' on CampusDown →

Sticky Bottom ButtonA sticky bottom button stays fixed at the bottom of the screen while users scroll. Covers thumb-reach research, size and width, keyboard and safe areas, content obscuring, conversion experiments and WCAG criteria.💼 Business Bottom NavigationHow bottom navigation (tab bars) works and how to design it: thumb-reach research, the 3–5 destination rule, icons with labels, discoverability versus hidden menus, and common mistakes.⚙️ Engineering & Technology Touch Target SizeWhat touch target size means, the 9 mm research, 44pt and 48dp platform guidelines, the WCAG 2.2 target-size criteria, the fat-finger problem and why spacing matters as much as size.⚙️ Engineering & Technology AI Search Algorithms: A* and MinimaxAI search algorithms explained: state-space search, breadth-first and depth-first search, Dijkstra, heuristics and A* (admissibility, consistency), game trees, minimax and alpha-beta pruning, based on the original papers.⚙️ Engineering & Technology

Latest ArticlesView all ›

New guides for college study and assignments (Korean)

This article was last updated on October 27, 2026. It is based on widely recognized original works and textbooks; when citing it in a paper, please check the original sources listed in the references.