Pixel 5 vs Pixel 7: screen size and viewport
The Pixel 5 lays web pages out at 393 × 851 CSS px with a pixel ratio of 2.75; the Pixel 7 at 412 × 915 with 2.625. The Pixel 7 is 19 px wider and 64 px taller.
The two screens side by side
Specs compared
| Spec | Pixel 5 | Pixel 7 | Difference |
|---|---|---|---|
| Viewport, portrait (CSS px) | 393 × 851 | 412 × 915 | −19 px wide, −64 px tall |
| Device pixel ratio | 2.75 | 2.625 | +0.125 for the Pixel 5 |
| Physical resolution | 1081 × 2340 | 1082 × 2402 | Pixel 7: 3% more pixels |
| Aspect ratio | 19.5:9 | 20:9 | Pixel 7 is taller |
| Visible height, portrait, with browser bars | ~755 px | ~819 px | −64 px for the Pixel 5 |
| Landscape width (CSS px) | 851 px | 915 px | −64 px for the Pixel 5 |
| Visible height, landscape | ~313 px | ~332 px | −19 px for the Pixel 5 |
| First released | 2020 | 2021 | 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 Pixel 7 is 19 CSS px wider (412 vs 393, 5% more). No common breakpoint falls between 393 and 412 px, so with typical media queries both get the same layout and the extra 19 pixels only stretch fluid columns, text lines and images.
In a 2-column card grid with 16 px page padding and 16 px gaps, each card is 182 px wide on the Pixel 7 and 172 px on the Pixel 5. Check that buttons, prices and long words still fit in the narrower one.
Pixel density and image sizes
The Pixel 5 has the denser screen: 2.75× against 2.625×. A full-width image (sizes="100vw") needs about 1081 px on the Pixel 5 and 1082 px on the Pixel 7 to look sharp — more on the Pixel 5 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 Pixel 5 and the same one on the Pixel 7.
Both pixel ratios are 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 both rather than assuming they match.
How much fits above the fold
On first load about 819 px of the page is visible on the Pixel 7 and 755 px on the Pixel 5: 64 px less (8%) on the Pixel 5, 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 Pixel 7, it can end up below it on the Pixel 5. Keep the headline and the main action within the first 755 px, and size full-screen sections with 100svh rather than 100vh — see the 100vh problem on mobile.
Relative to its width, the Pixel 7 has the taller screen (19.5:9 vs 20:9), so the same content is laid out narrower but more of its length fits at once.
In landscape
Turned sideways, the Pixel 5 is 851 px wide and the Pixel 7 915 px. The visible height drops to about 313 and 332 px, so a 64 px sticky header covers 20% and 19% 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
- Pixel 5 viewport size — one screen for the Google Pixel 4a / 5
- Pixel 7 viewport size — one screen for the Google Pixel 6 / 7 / 8
Or open the free check with the Pixel 5 and the Pixel 7 preselected: full-page screenshots in Chromium, with problems such as small text and crowded buttons highlighted.
Related comparisons
- iPhone 15 vs Pixel 8 — 393 vs 412 px wide, 3× vs 2.625×
- Pixel 8 vs Pixel 9 — both 412 px wide, 915 vs 924 px tall
Compare other devices → · All mobile viewport sizes →
Frequently asked questions
Is the Pixel 5 screen bigger than the Pixel 7?
In CSS pixels, which decide how much of a page fits, the Pixel 7 is larger: 412 × 915 against 393 × 851. The Pixel 7 has more physical pixels (1082 × 2402), which makes it sharper rather than roomier.
Do I need different CSS for the Pixel 5 and the Pixel 7?
Usually not. No common breakpoint falls between their widths (393 and 412 px), so a fluid layout gets the same rules on both and only stretches by 19 px.
How much of a web page is visible on the Pixel 5 vs the Pixel 7?
About 393 × 755 CSS px on the Pixel 5 and 412 × 819 on the Pixel 7 when a page first opens in portrait, after the status bar and Chrome on Android's bars. Bar heights are our device profiles' estimates.