- #108
- #107
- #106
- #105
- #104
- #103
- #102
- #101
- #100
- #99
- #98
- #97
- #96
- #95
- #94
- #93
- #92
- #91
- #90
- #89
- #88
- #87
- #86
- #85
- #84
- #83
- #82
- #81
- #80
- #79
- #78
- #77
- #76
- #75
- #74
- #73
- #72
- #71
- #70
- #69
- #68
- #67
- #66
- #65
- #64
- #63
- #62
- #61
- #60
- #59
- #58
- #57
- #56
- #55
- #54
- #53
- #52
- #51
- #50
- #49
- #48
- #47
- #46
- #45
- #44
- #43
- #42
- #41
- #40
- #39
- #38
- #37
iOS Home Indicator safe area
When redesigning the blog navigation experience, I noticed that iPhone’s Home Indicator, which covers the navigation bar (Figure 1, left old and right new). Therefore, in the new design, a safe area indicator was set up, allowing the website to use CSS env() + calc() to calculate the actual safe display area for the navigation bar.
- Add the page Meta attribute
<meta name="viewport" content="viewport-fit=cover" />
- Use the env(safe-area-inset-bottom) variable combined with
calc
to calculate the safe bottom distance for the navigation bar.
Now the Home Indicator no longer covers elements that are on the edge of the screen 👍🏻 (Figure 1, left Chrome right Safari)
env() was initially provided by iOS browsers, allowing developers to place web content within the safe area of the window to ensure that content displays correctly even on non-rectangular screens.
- Add the page Meta attribute
- #36
- #35
- #34
- #33
- #32
- #31
- #30
- #29
- #28
- #27
- #26
- #25
- #24
- #23
- #22
- #21
- #20
- #19
- #18
- #17
- #16
- #15
- #14
- #13
- #12
- #11
- #10
- #9
- #8
- #7
- #6
- #5
- #4
- #3
- #2
- #1