Why does my site look tiny on a phone?
Worth sorting promptly
If your site comes out as a shrunken version of the desktop page that visitors have to pinch and zoom to read, it's almost always one missing instruction — the viewport setting — rather than a design problem. It tells phones to size the page to their screen instead of pretending to be a desktop monitor.
What's going on
When phones first arrived, essentially every website was built for a desktop screen. So mobile browsers learned to pretend: they render the page at a notional desktop width and then shrink the whole thing to fit, producing a readable-if-you-zoom miniature.
That behaviour is still the default when a page doesn't say otherwise. The viewport setting is the page saying otherwise — “size me to the actual device” — and it's a single line in the page's head.
Almost every modern theme includes it. A site missing it is usually either genuinely old, or has had its template edited by hand at some point.
Why this one is worth treating as urgent
Most visitors to a UK small-business website arrive on a phone — for local and out-of-hours searches, the large majority. A site they have to zoom to read is a site a good number of them leave.
Google has indexed the web mobile-first for years, which means the mobile version of your page is the version it primarily judges. A page that isn't usable on a phone is ranked as a page that isn't usable, full stop.
It also interacts badly with everything else: tap targets end up too small, text falls below legible size, and the accessibility audit fails on items that would otherwise pass.
The fix, and the thing not to do
The fix is adding the standard viewport line to the site's template. On a themed site this is a small edit; on a hand-built one it's a one-line change.
The thing not to do is add user-scalable=no or a maximum-scale to it. That stops people zooming at all, which is actively hostile to anyone with imperfect eyesight and is flagged as an accessibility failure. Let people zoom.
Adding the viewport line to a site whose layout was never designed for narrow screens will make the problem visible rather than solve it — you'll get a correctly-sized page with a broken layout. That's still progress, but expect the conversation to continue into responsive styling.
How to check this yourself
- Open your site on an actual phone. If you have to pinch to read body text, the setting is missing or the layout isn't responsive.
- On a desktop, narrow your browser window slowly. A responsive site rearranges as it gets narrower; a non-responsive one just gets cropped or scrolls sideways.
- To confirm, right-click the page, choose “View page source” and search for “viewport”. You're looking for a line containing width=device-width.
- Google's free Mobile-Friendly Test and PageSpeed Insights both report it directly.
What to ask your web person
Copy this. It's phrased so you don't have to know the jargon to ask for the right thing.
Our site doesn't size correctly on phones. Could you add the standard viewport meta tag (width=device-width, initial-scale=1) — without disabling zoom — and let me know whether the layout itself needs responsive work on top of that?
Want to know if this applies to your site?
This one is measured by Google's Lighthouse, which takes minutes rather than seconds — so it comes with the in-depth assessment rather than the free check-up. The free check-up still covers your security, your email protection and how search engines see you, in about a minute and with no account.