I'm mostly a backend developer and haven't done much frontend work lately. Is 320 CSS pixels still a sensible minimum to support, or has that changed?
Is 320px still a useful minimum width for responsive design?
Answers
Yes, 320 CSS pixels is still a useful target, even if you aren't designing specifically for a phone that narrow. Zoom can make a wider browser window behave like a narrow viewport. For example, a 1280 CSS pixel wide window at 400% zoom can have an effective width of 320 CSS pixels.
WCAG's reflow criterion uses 320 CSS pixels as a test width for vertically scrolling content. The goal is for users to get the content and functionality without scrolling in two directions, with exceptions for content that needs a two dimensional layout. So check zoom as well as the narrow viewport itself.
Reply to this answer
I treat 320px as a layout stress test. It exposes text that won't wrap, controls that are too wide, and containers that refuse to shrink. Even if the design mockups start wider, checking there can catch problems that show up at other widths too.
Reply to this answer
Don't assume every layout has to look polished at exactly 320px, but it shouldn't become unusable there. Some interfaces have content that genuinely needs horizontal space. Make that area manageable rather than letting it push the whole page sideways.
Reply to this answer
There's no single minimum device width that settles this for every project. Designs may start at 360px or 375px, but that doesn't remove the need to consider zoom and increased text or display sizes. Test the actual content and controls, not just a blank layout at a preset width.
Reply to this answer
Add your answer
Answers are reviewed before publication.
2b~sidefolder_7:
That's a helpful distinction. A narrow viewport test isn't just about finding an old phone.