Android viewport sizes in CSS pixels: Pixel and Galaxy

Pixel and Galaxy reference sizes

Checked 12 November 2026. These are published portrait references, not a claim that every owner gets the same dimensions. Rows marked browser use a browser viewport from the cited dataset. The screen row is a whole-screen CSS reference, before browser controls take space.

Playwright publishes its testing profiles as source data, including separate screen and viewport fields for the Pixel models. Effective Viewport reports the S26 with Chrome’s controls expanded; it also publishes a taller 360 × 695 layout with controls collapsed. Choose the state relevant to your test.

References can disagree without describing the same configuration. Panescope’s Pixel 10 screen reference is 412 × 924 at DPR 2.625, while the Playwright browser profile above uses DPR 3. Keep a source’s dimensions and DPR together. Record a real device’s settings when reporting a discrepancy.

Android tablet reference sizes

These portrait sizes cover an established tablet, a newer large Galaxy Tab and a budget model. Two rows use whole-screen CSS references; the Tab S9 row follows Playwright’s browser profile. Source labels make that distinction explicit.

Landscape and split-screen windows deserve their own checks. A tablet held in landscape can show a wide desktop-style navigation while still being operated with fingers. A narrow app window can cross back into your phone layout. Write down the viewport of the window you actually tested.

Measure CSS width and DPR on your page

On a development page, add a temporary readout using this function and call it again after rotation or a window resize:

function viewportReading() {
  return {
    width: window.innerWidth,
    height: window.innerHeight,
    dpr: window.devicePixelRatio,
    visibleHeight: window.visualViewport?.height
  };
}

Keep the responsive viewport meta tag in the document head: <meta name="viewport" content="width=device-width, initial-scale=1">. That lets a responsive page use the device’s logical width. A legacy wide viewport can otherwise make your measurements look like a desktop page.

DPR describes the relationship between CSS pixels and physical pixels. It helps choose sharp raster images. Physical pixels per inch, usually advertised as PPI, describe the panel and are a different quantity. Dividing the resolution by PPI gives inches; it does not give a browser viewport.

Common Android breakpoint checks

Android has no universal CSS breakpoint list. Start with your content and use familiar widths as checkpoints. At 360 px, check that navigation and cards fit. At 412–448 px, check longer lines and multi-button rows. Use the CSS breakpoint checks for tablet transitions around 768 and 1024 px, then wider layouts around 1280 px.

For each breakpoint in your own stylesheet, check immediately below it and at it. For example, a 768 px minimum-width rule needs 767 and 768 px reviews. Check the intermediate widths too: a fixed-width card can fail between two otherwise tidy presets.

Use fluid grids, flexible images and wrapping text so nearby widths work as well. Treat hover behaviour separately from width. A wide Android tablet may still need a tap to open its navigation menu. Forms and sticky controls also need a review with the keyboard visible.

Check Android sizes from an iPhone or iPad

1. Open the URL in ViewPortal and choose the Pixel 10 (412 × 923) or Galaxy S26 (384 × 832) preset, or enter a custom width and height from the reference table.
2. Read the selected dimensions to confirm the width and height you are checking.
3. Compare wrapping, columns and navigation, then rotate the preview to check another orientation.
4. Capture and annotate the result. In Pro, put several widths together using the side-by-side workflow.

ViewPortal uses your iPhone or iPad’s WebKit engine at the selected Android dimensions. Use those views to check layout and breakpoints in WebKit, and include Android Chrome or Samsung Internet in your final browser checks. Pro dev tools let you inspect element dimensions, padding, fonts and colours, measure gaps, read console errors and find horizontal overflow.

Questions people ask

Sources and references

Sources checked 12 November 2026. Dimensions are published reference values; browser and display settings are described above.

• [1] Microsoft Playwright: device profiles, viewport and deviceScaleFactor
• [2] Effective Viewport: Galaxy S26, Chrome controls expanded and collapsed
• [3] Panescope: published screen-sized CSS references and DPR
• [4] doesitfit: Galaxy Tab screen-sized references and DPR
• MDN: devicePixelRatio
• web.dev: viewport settings and responsive layout

More guides

• Test a website on multiple screen sizes side by side
• iPhone viewport sizes in CSS pixels
• iPad viewport sizes in CSS pixels
• All responsive testing guides