Top inset
0px
env(safe-area-inset-top)
← All tools
Mobile viewport debugging
Safe-Area Insets Checker
Check CSS env(safe-area-inset-*) values, visual viewport offsets, and mobile browser viewport behavior for notch and edge-safe layouts.
Live safe-area values
Measure CSS environment insets and visual viewport behavior in the current browser.
Mobile testing note: Desktop and many Android browsers usually show 0px safe-area values. Test edge-to-edge layouts on real iOS Safari or supported mobile browsers for non-zero insets.
Right inset
0px
env(safe-area-inset-right)
Bottom inset
0px
env(safe-area-inset-bottom)
Left inset
0px
env(safe-area-inset-left)
Measurement status
Checking safe-area support…
Layout viewport
Measuring…
Visual viewport
Measuring…
Visual offset / scale
Measuring…
Safe-area CSS pattern
Use env() with fallbacks and keep important UI away from device edges.
.app-shell {
padding-top: max(16px, env(safe-area-inset-top));
padding-right: max(16px, env(safe-area-inset-right));
padding-bottom: max(16px, env(safe-area-inset-bottom));
padding-left: max(16px, env(safe-area-inset-left));
}Developer workflow
Use safe-area insets for edge-to-edge mobile UI
Safe-area values help responsive layouts avoid hardware cutouts, rounded screen edges, and mobile browser controls. They are especially useful for full-screen app shells, sticky bottom navigation, chat inputs, and installable web apps.
Add viewport-fit=cover
Use a viewport meta tag with viewport-fit=cover when you intentionally want an edge-to-edge iOS layout and need safe-area values.
Use env() with fallbacks
Wrap safe-area values in max() or combine them with base spacing so desktop and rectangular screens still have comfortable padding.
Test real devices
Desktop responsive mode is useful, but final checks should include real iOS Safari and Android Chrome when the UI touches screen edges.
Frequently asked questions
Why are my safe-area inset values zero?
Zero is normal on desktop browsers, rectangular viewports, and browsers that do not expose a non-zero safe area for the current page state.
What is env(safe-area-inset-bottom) used for?
It is commonly used to keep sticky bottom navigation, chat inputs, and call-to-action buttons above the home indicator area on supported mobile devices.
Does this tool detect keyboard height?
Browsers do not expose keyboard height directly in a consistent way, but visual viewport height and offset changes can help identify keyboard or browser chrome changes.
Should every page use viewport-fit=cover?
No. Use it when you intentionally want edge-to-edge layouts and have tested safe-area padding. Normal websites may not need it.
Content cluster
Related guides
Use these supporting guides to understand the tool result and next testing steps.
Related tools
Continue with another ScreenMetricLab utility.