Mobile Safe Area Calculator

About the Mobile Safe Area Calculator

Estimates the safe content area of a mobile screen after subtracting the status bar, notch inset and bottom home-indicator inset, the region where UI won't be clipped.

How to use

Enter the viewport size and the top and bottom safe-area insets, then click Calculate.

Worked example

393×852 with 47px top and 34px bottom insets → 393×771 usable.

How to use this calculator

1. Enter the device screen size.
2. Add the safe area inset values for each side.
3. Run the calculation to get the usable content area.
4. Use the result to guide layout, spacing, or cropping decisions.

The formula explained

• \(\text{screen width}\) = the full device width in pixels or points
• \(\text{screen height}\) = the full device height in pixels or points
• \(\text{left inset}\) = space blocked on the left by a notch, rounded corner, or system area
• \(\text{right inset}\) = space blocked on the right by a notch, rounded corner, or system area
• \(\text{top inset}\) = space blocked at the top by a notch or status area
• \(\text{bottom inset}\) = space blocked at the bottom by the home indicator or system bar
• \(\text{usable width}\) = the content width that remains available
• \(\text{usable height}\) = the content height that remains available

Step by step method

1. Start with the full screen dimensions of the device or preview frame.
2. Enter the inset values reported by the device or design spec for the top, bottom, left, and right edges.
3. Subtract the horizontal insets from the screen width to get usable width.
4. Subtract the vertical insets from the screen height to get usable height.

Worked example

Here is a simple example for an iPhone-style screen with a notch and a home indicator.

1. Suppose the screen is 390 pixels wide and 844 pixels tall, with top inset 47, bottom inset 34, left inset 0, and right inset 0.
2. Compute usable width: \(390 - 0 - 0 = 390\) pixels.
3. Compute usable height: \(844 - 47 - 34 = 763\) pixels.

Tips and common mistakes

• Use the same unit for every input, such as pixels, points, or density-independent pixels.
• Do not confuse safe area insets with margins or padding you add yourself.
• Check whether the tool expects screen size before rotation or after rotation.
• If a device has asymmetric edges, enter each side separately instead of reusing one value.

Frequently asked questions