MobileCheck

Galaxy S24 vs Galaxy S24 Ultra: screen size and viewport

The Galaxy S24 lays web pages out at 360 × 780 CSS px with a pixel ratio of 3; the Galaxy S24 Ultra at 384 × 832 with 2.813. The Galaxy S24 Ultra is 24 px wider and 52 px taller.

Galaxy S24360 × 780
Galaxy S24 Ultra384 × 832
Width difference24 px
Visible height~684 vs ~736

The two screens side by side

Galaxy S24360 × 780 CSS px~684 px visiblebars 80 + 16 px
Galaxy S24 Ultra384 × 832 CSS px~736 px visiblebars 80 + 16 px
Page area on first load (outlined) Status bar and browser bars (shaded)Both screens to the same scale in CSS pixels, portrait. Bar heights are the values of our device profiles, so treat the visible area as approximate.

Specs compared

SpecGalaxy S24Galaxy S24 UltraDifference
Viewport, portrait (CSS px)360 × 780384 × 832−24 px wide, −52 px tall
Device pixel ratio32.813+0.188 for the Galaxy S24
Physical resolution1080 × 23401080 × 2340same
Aspect ratio19.5:919.5:9same
Visible height, portrait, with browser bars~684 px~736 px−52 px for the Galaxy S24
Landscape width (CSS px)780 px832 px−52 px for the Galaxy S24
Visible height, landscape~280 px~304 px−24 px for the Galaxy S24
First released202220242 years apart
Engine in MobileCheckChromium (Chrome)Chromium (Chrome)same engine

CSS px are the units media queries see. Visible heights subtract the status bar and the Chrome on Android bars as set in our device profiles; real bar heights vary with settings and scrolling. The release year is that of the first model with each screen.

What this means for your layout

How the width difference affects your layout

The Galaxy S24 Ultra is 24 CSS px wider (384 vs 360, 7% more). One common breakpoint falls between them: (min-width: 375px) (a common small-phone test width) matches the Galaxy S24 Ultra but not the Galaxy S24, so a rule written for that width applies on only one of the two.

In a 2-column card grid with 16 px page padding and 16 px gaps, each card is 168 px wide on the Galaxy S24 Ultra and 156 px on the Galaxy S24. Check that buttons, prices and long words still fit in the narrower one.

Pixel density and image sizes

The Galaxy S24 has the denser screen: 3× against 2.813×. A full-width image (sizes="100vw") needs about 1080 px on the Galaxy S24 and 1080 px on the Galaxy S24 Ultra to look sharp — more on the Galaxy S24 even though its viewport is narrower.

With a srcset such as 640w, 828w, 1080w, 1290w, 1440w, 1640w, 2048w, the browser would normally pick the 1080w file on the Galaxy S24 and the same one on the Galaxy S24 Ultra.

The Galaxy S24 Ultra's ratio of 2.813 is fractional: one CSS pixel isn't a whole number of device pixels, so 1 px borders and hairlines can be rounded unevenly. Check thin lines on that screen rather than assuming they match.

How much fits above the fold

On first load about 736 px of the page is visible on the Galaxy S24 Ultra and 684 px on the Galaxy S24: 52 px less (8%) on the Galaxy S24, roughly 2 lines of 16 px body text at a 1.5 line height.

If your main button sits just above the fold on the Galaxy S24 Ultra, it can end up below it on the Galaxy S24. Keep the headline and the main action within the first 684 px, and size full-screen sections with 100svh rather than 100vh — see the 100vh problem on mobile.

In landscape

Turned sideways, the Galaxy S24 is 780 px wide and the Galaxy S24 Ultra 832 px. The visible height drops to about 280 and 304 px, so a 64 px sticky header covers 23% and 21% of the screen — under the 25% at which MobileCheck flags fixed bars covering the page.

Same browser engine

Both run Android, so both render with Chromium, the engine behind Chrome. Engine quirks are the same; the differences above come from size and density alone. See how to test a website on Android.

More about these devices

Or open the free check with the Galaxy S24 and the Galaxy S24 Ultra preselected: full-page screenshots in Chromium, with problems such as small text and crowded buttons highlighted.

Related comparisons

Compare other devices → · All mobile viewport sizes →

Frequently asked questions

Is the Galaxy S24 screen bigger than the Galaxy S24 Ultra?

In CSS pixels, which decide how much of a page fits, the Galaxy S24 Ultra is larger: 384 × 832 against 360 × 780. Their physical resolutions are the same.

Do I need different CSS for the Galaxy S24 and the Galaxy S24 Ultra?

Only if your breakpoints fall between 360 and 384 px: a min-width query at 375px applies to one and not the other. A fluid layout handles both without device-specific rules.

How much of a web page is visible on the Galaxy S24 vs the Galaxy S24 Ultra?

About 360 × 684 CSS px on the Galaxy S24 and 384 × 736 on the Galaxy S24 Ultra when a page first opens in portrait, after the status bar and Chrome on Android's bars. Bar heights are our device profiles' estimates.