Android CSS pixels guide
Android Viewport Sizes: CSS Pixels to Test Before Mobile QA
Android viewport sizes are the CSS pixel widths your media queries actually see in Chrome and WebView. Use this guide to cover narrow phones, common Pixel and Galaxy widths, large Android screens, and foldable edges without testing every device name.
Android viewport sizes table
Treat these portrait values as practical Android CSS pixels for responsive web QA. Browser UI, Display size, font scaling, address bars, orientation, and foldable posture can change the usable height.
CSS pixels
| Android class | CSS viewport | Width | Typical DPR | Use it for |
|---|---|---|---|---|
| Small Android phones | 360 x 640 to 360 x 800 | 360px | 2x to 3x | Use this as the narrow Android guardrail for nav drawers, forms, cookie banners, and fixed CTAs. |
| Narrow modern Android | 384 x 824 to 384 x 854 | 384px | 2.5x to 3x | A useful middle width when 360px passes but text, cards, or product images still wrap awkwardly. |
| Standard Android phones | 393 x 851 to 393 x 873 | 393px | 2.75x to 3x | Good everyday Android CSS pixels for product pages, pricing cards, dashboards, and account screens. |
| Large Pixel and Galaxy phones | 412 x 869 to 412 x 915 | 412px | 2.6x to 3.5x | The most practical large-phone Android viewport size for release QA and mobile screenshots. |
| Tall large Android phones | 432 x 936 to 432 x 960 | 432px | 3x to 3.5x | Catches layouts that become too relaxed on wide phones before they should turn into tablet UI. |
| Foldable cover screens | 344 x 882 to 374 x 904 | 344px to 374px | 2.5x to 3x | Narrow cover displays expose cramped navigation, filters, chat widgets, and sticky bottom actions. |
| Unfolded foldables | 674 x 842 to 841 x 701 | 674px to 841px | 2x to 3x | Check whether the layout should stay phone-like, become tablet-like, or use a split-pane state. |
The practical Android QA pack
Start with mobile responsive test sizes that represent layout behavior, then add device-specific widths only when analytics, support tickets, or a recent bug points there.
Minimum phone
344px, 360px
Run this whenever mobile navigation, forms, checkout, bottom bars, or support widgets change.
Daily Android pass
384px, 393px, 412px
This compact set covers most mobile responsive test sizes without turning QA into a device catalog.
Large phone edge
432px, 480px
Use this range for grids, cards, image crops, pricing tables, and sticky CTAs that may stretch too early.
Foldable and tablet edge
674px, 720px, 841px
Verify menus, two-column layouts, sidebars, modals, and dashboards before the desktop breakpoint.
How to use Android CSS pixels
Android devices vary by panel size, density, browser chrome, and user display settings. Keep the viewport list focused on the widths where your content actually changes shape.
- Test Android CSS pixels, not physical screen resolution.
- Include one narrow cover-screen width if mobile navigation changed.
- Check 360px, 393px, and 412px before adding another Android-specific width.
- Test just below and above 480px, 600px, 768px, and any custom CSS breakpoints.
- Repeat the pass with browser UI, keyboard, cookie banner, chat widget, and error states visible.
Breakpoint example
Avoid breakpoints named after Android models. Use ranges that cover real content behavior, then validate the edges with synced viewports.
@media (max-width: 359px) {
/* Narrow Android cover screens */
}
@media (min-width: 360px) and (max-width: 431px) {
/* Most Android CSS pixel phone widths */
}
@media (min-width: 432px) and (max-width: 767px) {
/* Large phones before tablet layout */
}
@media (min-width: 768px) {
/* Tablet, unfolded foldable, and wider */
}Turn the Android list into a repeatable responsive pass
Check one viewport, build a browser size pack, inspect CSS breakpoints, and plan the exact widths to retest around each responsive layout change.
Related Sizzy tools
Viewport Checker
Check any Android viewport size, breakpoint category, aspect ratio, and CSS media query helper.
Browser Size Cheat Sheet
Build a practical mobile responsive test sizes pack for Android, iPhone, tablet, and desktop QA.
CSS Breakpoint Checker
Paste media queries or Tailwind screens and find risky gaps around Android CSS pixels.
Website Breakpoint Finder
Turn page notes and target devices into breakpoint candidates, QA viewport sizes, and test plans.
FAQ
What are Android viewport sizes?
Android viewport sizes are the CSS pixel dimensions that Chrome, WebView, and responsive CSS use after device pixel ratio and display scaling are applied.
Are Android CSS pixels the same as physical pixels?
No. Android phones may have thousands of physical pixels, but responsive CSS usually sees a much smaller CSS pixel viewport such as 360px, 393px, or 412px wide.
Which Android viewport sizes should I test first?
Start with 360px for narrow Android phones, 393px for standard modern phones, 412px for large Pixel and Galaxy-style phones, and one foldable or tablet edge when the layout changes around 600px to 768px.
Should I create Android-specific CSS breakpoints?
Usually no. Use Android viewport sizes to find where the content breaks, then define content-based breakpoint ranges that also work for iPhone, tablets, and browser resizing.