Breakpoints

The ambulance took me to the hospital. When it became clear that I wouldn’t be leaving anytime soon, I realized that I didn’t have my reading glasses with me. So to be able to read comfortably on my mobile phone, I went into Android’s accessibility settings and increased the font size. Android has two size options: Font size, to make text bigger or smaller; and display size, to make the whole UI bigger or smaller.

Device pixels and CSS pixels

Back in the day, Peter-Paul Koch explained the difference between device pixels and CSS pixels, something that is even more important on modern phones.

Last year, when my trusty old OnePlus 7 became unusable, I replaced it with a Pixel 9. My new phone has a resolution of 1080×2424 at 422ppi, that is very retina in Apple speak. Using such a resolution in the web browser would render a tiny illegible desktop site. To avoid that, CSS pixels add a layer of abstraction. Initially the amount of actual pixels compared to CSS pixels was simply a 2x or 3x conversion^[1], but these days fractional scaling is also common. With the abstraction in place, we end up with more manageable screen widths such as 360px, 375px, and 414px.

In 2007, the first iPhone launched with a screen width of 320px. Back then CSS pixels would be the same as device pixels, so we had a 1x conversion.

Several months ago, I tasked myself to find out if there are new phones for sale where you end up with a screen width of 320px in the mobile browser. My conclusion has been: No, 360px is the new minimum. While that result made my happy, in hindsight the whole exercise was completely unneccessary, as I’m about to explain.

Below 360px

The problem is, there is no agreed-upon minimum resolution. Talking about 360px being some kind of “minimum” when it comes to CSS pixels means we only take the phone’s default accessibility settings into account.

The moment we change those settings—like I did to make things more legible—, all assumptions go out the window. The Pixel 9 gives me 414px in the browser, if and only if I have the default settings. When I got my new phone, I did increase the font size during initial setup. Dragging that font size slider to the right by just one notch meant I never got those 414px, and instead ended up with 360px. In hospital I moved the slider again, I’m now at the center position, and I only get a screen width of 324px, close to what the original iPhone had.

Eventually I put this to the extreme, I bumped both font size and display size to their maximum values. I then ended up at 252px. Most websites will choke under such conditions. Obviously I did not keep the extreme. But now that I’m browsing the web with a screen width of 324px, I encounter lots of issues. Sometimes it’s merely about visual imperfection or imbalance, but quite often I run into the dreaded horizontal scrollbar.

Let’s be very clear, there are countless phones out there with adjusted font or display size. Deteriorating eyesight is only one possible reason. People rely on these accessibility settings, without them their phones would be much harder—if not impossible—to use.

To make matters worse, that added horizontal scrollbar fails WCAG’s Reflow (Level AA), as Success Criterion 1.4.10 explicitely mentions 320px:

Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for: Vertical scrolling content at a width equivalent to 320 CSS pixels.

Truncation is not a content strategy

More generally speaking, any design where the content cannot breathe should be avoided. But reality shows that there are many sites out there that break below 360px.^[2]

We can do better.

If you moved on from Responsive Web Design and its (over)use of breakpoints, and embraced Intrinsic Web Design, you are probably halfway there. But I guess the one true way out of this mess is to have simpler designs to begin with.

---

Update

March 5, 2026: Ignorance is bliss. I use Firefox as my main browser on desktop and mobile, and I wrote this article under the assumption that Safari and Chromium-based browsers would do similar things. Having just watched a video by Manuel Matuzović about text-scale (a new HTML meta tag) made me realize that’s not the case. That said, I think my article may become even more relevant once we start to see sites with the text-scale meta tag added, but I need to do some testing to make sure I fully understand what’s going on.

---

Footnotes

1. Per axis, width and height, meaning one CSS pixel on a 2x screen is the equivalent of four (2×2) device pixels. ↩︎
2. When I worked on the latest design for this very site, I too did include a breakpoint at 360px. I considered anything below that to be smartwatch territory and tweaked things accordingly. I even made sure to cater for circular displays. Classic overengineering. But with my current font size settings on Android, I always get the smartwatch version of my site. 🤦 ↩︎