Phones Mess with CSS Media Queries

August 11, 2025

Don’t you hate it when the thing you try hard to serve does things on purpose to make it even more difficult for you?

(Edit: I may have resolved the problem described here by correcting a mistake in the html code. This will be the topic of a subsequent post on the subject of humility.)

Web pages need to look good on a wide range of different displays. Size matters; see for yourself: hold a smartphone up next to a big, wide, flat-screen TV. Complicating things further, hand-held devices switch at the twist of a wrist between tall, portrait mode and wide, landscape orientation.

Web page design raced to keep up with the increasing range of displays. One trick is called a CSS Media Query. Basically, your page asks the browser for some facts about the screen. Your page code then chooses particular display instructions for different screen sizes and orientations.

Very recently, I managed to achieve a rudimentary media query based on the screen width. The page you are viewing will present two columns on screens wider than a specified amount, otherwise everything flows in a single column that looks better on narrower displays.

The effect works fine on a desktop computer or laptop screen. Drag the browser window wider and narrower. It will switch between the two different layouts.

But on my phone it did not seem to work. Instead of showing the narrow version as expected, it showed a very tiny version of the wide-screen layout.

Here is a funny thing. The phone has zoom settings for the browser. Increasing the zoom setting above a certain level causes the phone to switch over to the single-column page design.

Something there is about the zoom setting that affects the browser software’s evaluation of the screen width. This feature, in turn, messes with my media query.

Well, fine, I can modify settings on my own phone to obtain a desired viewing experience. This stops short of my objective, however.

I want the page to look good by default on anybody’s phone. How do I achieve that result? I do not know. Yet.