Safe Area Handling

This walks you through handling iPhone notches, Dynamic Island, home indicators, and Android cutouts in Capacitor apps using CSS environment variables like safe-area-inset-top and safe-area-inset-bottom. You get concrete examples for headers, tab bars, and full-bleed layouts, plus React hooks and Vue composables if you need to read inset values in JavaScript. The CSS approach is usually cleaner since you can just use env() with calc() for combined padding, but the JavaScript solutions are handy when you need dynamic calculations. Don't forget viewport-fit=cover in your meta tag or the insets won't work. Most useful when users report content disappearing under the notch or home indicator on modern devices.

Install to Claude Code

npx -y skills add cap-go/capgo-skills --skill safe-area-handling --agent claude-code