Trying to understand iOS navigation bar sizing in mockup vs actual

Question

Hi!I'm using XD to design an app. I've selected a nav bar from the Apple UI kit as a place holder. What I can't figure out is why the nav bar and screen appear smaller than the actual navigation bar when viewing other apps. For example, I'm designing a screen for iPhone 7/8. Using a nav bar that is 375 w x 64 h. When I compare my design to other iOS apps that use the same standard size bar the design seems more zoomed in and larger than my mockup. I'd love to know why this is so I can design in the same view. It seems like the design is upscaled. All photos below are phone screenshots. Any help would be awesome .I'm using XDCanvas is 375 x 667See comparison screenshots from iPhone 6

Dan Rodney · Accepted Answer

I believe the screenshot on the left has Display Zoom turned on (which makes everything bigger), and the screenshot on the right is for an iPhone for it turned off (which makes everything smaller).

You can read more about display zoom here: Explaining Display Zoom on the iPhone 6 and 6 Plus - CNET

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded