This sounds like a small detail, but it changes the whole design process.

If the screen size is wrong, spacing, grid, typography, and preview tests can feel wrong too.

So this post is a practical mobile screen size guide for UI/UX designers. Not a perfect technical document. More like a useful reference when you start a Figma, Sketch, Framer, or product design file.

Screen size and viewport are not the same thing

One important thing first.

The official device resolution and the design viewport are not always the same.

For example, Apple or Samsung can list a very high physical display resolution. But in UI design tools, we usually work with a scaled viewport size.

That is why you may see an iPhone with a physical resolution like 2556×1179, but design files commonly use something like 393×852.

For daily UI work, the viewport value is usually more useful.

My common starting point

For many mobile UI projects, I still like starting around 390×844 px or 393×852 px.

It is a good middle point for modern iPhone design, and it also helps me preview the product on real devices without too much surprise.

But I do not design only for one phone.

The real work is not only choosing one artboard. The real work is building a grid, spacing system, components, and responsive behavior that can survive different screens.

Older but still useful mobile screen sizes

I do not want to delete older devices from this list.

Some products still have users on older phones. Also, old sizes help us understand how mobile UI dimensions changed over time.

Updated mobile screen sizes for 2026

This is the updated part of the guide.

These values are practical viewport or artboard sizes for design work. I use them as starting points, not as strict rules for every project.

Do not design only for one size

A mobile design can start from one artboard, but it should not live only inside one artboard.

When I design a mobile product, I try to check at least three things:

• a smaller mobile width
• a common modern phone size
• a larger phone or tablet-like layout

This is where grid and component logic becomes important.

If the card, button, input, navigation, and spacing rules are weak, changing the screen size will break the design very fast.

Foldable phones need extra thinking

Foldable devices are not only bigger phones.

They can have a cover screen and a main screen. The user can start a task on one screen and continue on another.

For product design, this means we should think about continuity, layout adaptation, and what information should stay visible.

So I do not treat foldable screens as only a nice extra size. They can create different UX decisions.

My practical advice

If you are starting a mobile UI project, pick one clean starting size first.

For example, 393×852 px or 390×844 px can be a good start for many projects.

Then test the same design in smaller and larger sizes.

Do not only scale everything. Check the real layout behavior.

Does the main button still feel reachable? Is the content too dense? Does the navigation still make sense? Are cards too tall? Is the empty state still readable?

These questions are more important than memorizing every device size.

Final note

Mobile screen sizes are useful, but they are only the start.

Good mobile UI design needs grid, spacing, typography, components, states, and real product thinking.

A correct artboard helps you begin. A good system helps the design survive.

You can also read the Turkish version of this topic here: Mobil Arayüz Tasarımı Mobil Ekran Boyutları Nedir?

For more related posts, check my UI/UX, Product Design, Technology, and Tools categories.

Sources

• Apple iPhone 16 technical specifications
• Apple iPhone 16 Pro technical specifications
• Apple iPhone 16e technical specifications
• Apple iPad Pro technical specifications
• Apple iPad Air technical specifications
• Apple iPad mini technical specifications
• Samsung Galaxy S25 Ultra
• Samsung Galaxy Z Fold7
• Samsung Galaxy Z Flip7
• Google Pixel 9 technical specifications

The post Mobile Screen Sizes for UI Design: Updated Viewport Guide first appeared on Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım.