OnePlus 11 vs Galaxy S23: screen size and viewport
The OnePlus 11 lays web pages out at 412 × 919 CSS px with a pixel ratio of 2.625; the Galaxy S23 at 360 × 780 with 3. The OnePlus 11 is 52 px wider and 139 px taller.
The two screens side by side
Specs compared
| Spec | OnePlus 11 | Galaxy S23 | Difference |
|---|---|---|---|
| Viewport, portrait (CSS px) | 412 × 919 | 360 × 780 | +52 px wide, +139 px tall |
| Device pixel ratio | 2.625 | 3 | −0.375 for the OnePlus 11 |
| Physical resolution | 1082 × 2412 | 1080 × 2340 | OnePlus 11: 3% more pixels |
| Aspect ratio | 20:9 | 19.5:9 | OnePlus 11 is taller |
| Visible height, portrait, with browser bars | ~823 px | ~684 px | +139 px for the OnePlus 11 |
| Landscape width (CSS px) | 919 px | 780 px | +139 px for the OnePlus 11 |
| Visible height, landscape | ~332 px | ~280 px | +52 px for the OnePlus 11 |
| First released | 2023 | 2022 | 1 year apart |
| Engine in MobileCheck | Chromium (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 OnePlus 11 is 52 CSS px wider (412 vs 360, 14% more). 2 common breakpoints fall between them: (min-width: 375px) (a common small-phone test width), (min-width: 390px) (a common phone test width) match the OnePlus 11 but not the Galaxy S23, 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 182 px wide on the OnePlus 11 and 156 px on the Galaxy S23. Check that buttons, prices and long words still fit in the narrower one.
Pixel density and image sizes
The Galaxy S23 has the denser screen: 3× against 2.625×. A full-width image (sizes="100vw") needs about 1080 px on the Galaxy S23 and 1082 px on the OnePlus 11 to look sharp — more on the Galaxy S23 even though its viewport is narrower.
With a srcset such as 640w, 828w, 1080w, 1290w, 1440w, 1640w, 2048w, the browser would normally pick the 1290w file on the OnePlus 11 and the 1080w file on the Galaxy S23. Leave out the 1290w candidate and the OnePlus 11 upscales a smaller file.
The OnePlus 11's ratio of 2.625 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 823 px of the page is visible on the OnePlus 11 and 684 px on the Galaxy S23: 139 px less (20%) on the Galaxy S23, roughly 5 lines of 16 px body text at a 1.5 line height.
If your main button sits just above the fold on the OnePlus 11, it can end up below it on the Galaxy S23. 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.
Relative to its width, the OnePlus 11 has the taller screen (20:9 vs 19.5:9), so the same content is laid out narrower but more of its length fits at once.
In landscape
Turned sideways, the OnePlus 11 is 919 px wide and the Galaxy S23 780 px; (min-width: 840px) matches only the OnePlus 11 in landscape. The visible height drops to about 332 and 280 px, so a 64 px sticky header covers 19% and 23% 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
- OnePlus 11 viewport size
- Galaxy S23 viewport size — one screen for the Samsung Galaxy S22 / S23 / S24 / S25
Or open the free check with the OnePlus 11 and the Galaxy S23 preselected: full-page screenshots in Chromium, with problems such as small text and crowded buttons highlighted.
Related comparisons
- iPhone 17 vs Galaxy S25 — 402 vs 360 px wide, 3× vs 3×
- iPhone 15 vs Galaxy S24 — 393 vs 360 px wide, 3× vs 3×
- iPhone Air vs Galaxy S25 — 420 vs 360 px wide, 3× vs 3×
- Galaxy S24 vs Galaxy S24 Ultra — 360 vs 384 px wide, 3× vs 2.813×
- Galaxy S25 vs Pixel 9 — 360 vs 412 px wide, 3× vs 2.625×
- Galaxy S21 vs Galaxy S22 — both 360 px wide, 800 vs 780 px tall
Compare other devices → · All mobile viewport sizes →
Frequently asked questions
Is the OnePlus 11 screen bigger than the Galaxy S23?
In CSS pixels, which decide how much of a page fits, the OnePlus 11 is larger: 412 × 919 against 360 × 780. The OnePlus 11 has more physical pixels (1082 × 2412), which makes it sharper rather than roomier.
Do I need different CSS for the OnePlus 11 and the Galaxy S23?
Only if your breakpoints fall between 360 and 412 px: a min-width query at 375px or 390px 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 OnePlus 11 vs the Galaxy S23?
About 412 × 823 CSS px on the OnePlus 11 and 360 × 684 on the Galaxy S23 when a page first opens in portrait, after the status bar and Chrome on Android's bars. Bar heights are our device profiles' estimates.