Was ist CSS-Safe-Area-Insets-Generator?
Safe-Area-Insets sind CSS-Umgebungsvariablen, die helfen, Inhalte von Display-Notches, abgerundeten Bildecken, Home-Indicator-Bereichen und anderen Bildschirmausschnitten fernzuhalten. Sie sind nutzlich fur mobile Web-Apps, fixierte Kopfzeilen, sticky untere Leisten und Full-Bleed-Layouts.
Kurze Antwort
Generieren Sie CSS-Padding-, Margin- oder Positionsversatzregeln mit env(safe-area-inset-*) und Fallback-Werten. Dies halt Inhalte von Display-Notches, abgerundeten Bildecken und Home-Indicators auf modernen mobilen Geraten fern.
Last updated: 2026-06-11
Einschränkungen
- Safe-Area-Inset-Variablen sind nur auf Geraten mit Notch und Telefonen mit abgerundeten Ecken oder Home-Indicators relevant. Desktop- und altere Mobilbrowser geben fur alle Safe-Area-Werte Null zuruck.
- Ein Fallback-Wert ist unerlasslich. Ohne Fallback verwenden Browser, die env()-Variablen nicht unterstutzen, den Standardwert Null, was dazu fuhren kann, dass Inhalt mit Seitenrandern uberlappt.
- Das viewport-fit=cover-Meta-Tag muss im HTML-head vorhanden sein, damit Safe-Area-Variablen auf iOS Safari die gewunschte Wirkung erzielen. Ohne es wird die Seite moglicherweise mit Letterbox-Effekt dargestellt.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
So nutzt du dieses Tool
- Wahlen Sie, ob Sie Padding-, Margin- oder Inset-Regeln generieren mochten.
- Legen Sie einen Fallback-Wert fur Browser und Bildschirme fest, die keine spezielle Safe-Area-Bemassung benotigen.
- Geben Sie den Selektor ein, der die Safe-Area-Bemassung erhalten soll.
- Kopieren Sie das Meta-Viewport-Tag und das CSS in Ihre Seite und testen Sie es auf einem mobilen Gerat oder Simulator.
Wofür du es nutzen kannst
- Fixierte Kopfzeilen und untere Leisten von Bildschirmausschnitten fernhalten.
- Sichere Abstande zu mobilen Web-Apps hinzufugen.
- Wiederverwendbare CSS-Variablen fur Safe-Area-Abstande erstellen.