iPhone Mockups: Sizes and Best Practices

An iPhone mockup only works when the screen fits the frame the way it would on a real device. Get the size and safe areas right and the result looks shipped. Get them wrong and the screen feels stretched, cropped, or oddly off, even if everyone cannot say why.

This guide is for designers, founders, and developers who want their iPhone mockups to be accurate, not just pretty. I will cover current iPhone screen sizes in a clear table, explain safe areas and the Dynamic Island, and share the best practices that keep frames crisp. By the end you will frame any iOS screen with confidence.

What you will learn

• Current iPhone screen sizes in points and pixels.
• What safe areas are and why they matter for mockups.
• How to handle the notch, the Dynamic Island, and rounded corners.
• Best practices for capturing and exporting crisp iPhone mockups.
• Where to place an iPhone mockup for the most impact.

Why iPhone sizing matters in a mockup

iOS screens come in a handful of fixed sizes, and each one has its own aspect ratio. If your screenshot does not match the frame's ratio, the tool either stretches it or crops it. Both read as wrong.

The fix is to capture at a real iPhone resolution and frame it in a matching device. When the ratio matches, the screen sits in the frame exactly as it would in your hand. That accuracy is what makes a mockup convincing.

Apple publishes exact device metrics, and it is worth checking the source. See the Apple Human Interface Guidelines for current sizes and the latest device details.

Current iPhone screen sizes

iOS measures layout in points, then multiplies by a scale factor to get pixels. Most modern iPhones render at 3x, so one point equals three pixels. Here are the common current sizes to design and capture against.

The key takeaway is the tall, roughly 19.5:9 aspect ratio shared across modern iPhones. Capture at the matching pixel size and your screenshot drops into the frame with no stretching. Always confirm exact numbers for a specific device in Apple's resources, since metrics update with new releases.

Safe areas, the notch, and the Dynamic Island

A safe area is the part of the screen guaranteed to be clear of system elements like the status bar, the home indicator, the notch, and the Dynamic Island. Content inside the safe area never gets covered.

Keep key content in the safe area

When you capture a screen for a mockup, make sure important buttons and text sit inside the safe area. If a key element is tucked under the Dynamic Island in your capture, it will look broken in the frame.

Respect rounded corners

Modern iPhones have rounded screen corners. Content that runs to the very edge can get clipped by the curve. Leave a small margin so nothing important touches the corner.

Handle the Dynamic Island and notch

Newer iPhones use the Dynamic Island, while some older models use a notch. A good mockup frame matches whichever your target device uses. Capture from a device or simulator that has the right cutout, so the status area looks correct.

Best practices for crisp iPhone mockups

Accuracy and sharpness come from a few repeatable habits. Build these in and every iPhone mockup looks finished.

Capture at native resolution

Take the screenshot on a real iPhone or a simulator set to the exact device. That gives you the native pixel size and the correct cutout. A screenshot from the wrong device class will not match the frame's ratio.

Use real content

Replace placeholder text and dummy avatars with real, representative content. A believable screen makes the whole mockup feel like a shipped product. Lorem text instantly signals an unfinished design.

Match the frame to the device

Pick a frame that matches the iPhone you captured from. A Pro Max screenshot in a compact frame will look stretched. When the frame and the capture agree, the screen sits perfectly.

Export at the right scale

Export at 2x for web and retina, and 3x for print or large heroes. PNG keeps transparency so you can place the iPhone over any background. See the export documentation for every option.

How to make an iPhone mockup in Zepixo

Here is the quick workflow. It takes a native iPhone screenshot to a finished frame in a few minutes. Follow along in the Zepixo Mockups workspace.

First, capture your screen at native iPhone resolution and crop to the edges. Then upload it, pick an iPhone frame, and choose flat 2D for clarity or 3D for energy. Let the screenshot fit the display area and confirm nothing important sits under the Dynamic Island or near a corner.

Next, set a body color and a background, or export with no background for a transparent PNG. For 3D, tune the light until the screen stays readable. Then export at 2x or 3x. For the wider workflow, see our screenshot to mockup guide and the 2D mockups documentation.

Ready to try it? Open Zepixo Mockups and frame your next iPhone screen accurately in minutes.

Where iPhone mockups have the most impact

An iPhone mockup can do several jobs. Matching it to the channel keeps your work sharp and on message.

App store listings

App stores reward clarity. Flat iPhone frames with short captions convert best, because shoppers scan fast. Follow the exact sizes in Apple's App Store screenshot specifications, and see our app store screenshot guide.

Landing page heroes

On a landing page, a tilted 3D iPhone gives instant context above the fold. Keep the screen content simple so it reads at a glance on a phone browser.

Social posts

Social feeds reward contrast and motion. A bold background behind a 3D iPhone, or a short spin video, stops the scroll. Our animated video mockups guide shows how.

Building a consistent set of iPhone mockups

App store listings and landing pages usually need several iPhone frames, not one. A set that looks like a family takes a little discipline, and it signals a polished, trustworthy app.

Lock three things across every frame: the device body color, the background style, and the light direction. When those match, the whole row reads as one product. Decide them once at the start, then reuse them on each screen.

Hold the framing rhythm steady too. If the first iPhone is tilted ten degrees, tilt the rest the same way. And keep the export scale identical, so no single frame looks softer than its neighbors. For more on this, see our app store screenshot mockups guide.

2D versus 3D for iPhone screens

The same iPhone screenshot can go flat or tilted, and the choice depends on the job. Flat 2D keeps every label and button readable, which is why app stores and docs favor it. The straight-on view hides nothing.

A 3D tilt adds depth and a premium feel, which suits a landing page hero or a social post. The trade-off is that perspective can shrink the screen near the far edge. Keep the angle modest so the interface stays legible.

Many projects use both, driven by the same capture. A 3D hero grabs attention, while flat frames below explain the product. Our 2D vs 3D mockups guide breaks down the choice in depth.

Frequently asked questions

What are the current iPhone screen sizes?

Modern iPhones share a tall, roughly 19.5:9 aspect ratio. Common pixel sizes range from about 1125 x 2436 on compact models to 1290 x 2796 on Pro Max models, all at 3x scale. Always confirm exact numbers in Apple's resources.

What is a safe area on an iPhone?

A safe area is the part of the screen guaranteed clear of system elements like the status bar, the Dynamic Island, and the home indicator. Keep important content inside it so nothing gets covered in a mockup.

How do I handle the Dynamic Island in a mockup?

Capture from a device or simulator that has the Dynamic Island, and use a matching frame. Make sure no key content sits under the island in your screenshot, so the status area looks correct in the mockup.

What resolution should an iPhone mockup be?

Capture at native iPhone resolution, then export at 2x for web and retina or 3x for print and large heroes. Starting at native resolution keeps the screen crisp at every export size.

Why does my iPhone screenshot look stretched in the frame?

The screenshot's aspect ratio does not match the frame. Capture from the same iPhone class as the frame, so the ratios agree and the screen fits without stretching.

Should an iPhone mockup be 2D or 3D?

Use 2D for app store listings and docs where legibility matters, and 3D for heroes and social where energy helps. Many projects use both, matched to the channel.

Match the size, respect the safe area, and capture native, and your iPhone mockups will look exactly like the real thing.