Speed · fix guide

How to make your website mobile-friendly

Q: What is the viewport meta tag?

A line in the page's head, , that tells phones to lay the page out at their real screen width instead of a desktop width of around 980 pixels.

If visitors have to pinch and zoom to read your site on a phone, it is missing the viewport tag and a layout that adapts. Here's how to fix both, and when a rebuild is the honest answer.

Published October 22, 2026Updated October 22, 2026By Remidiy

Short answer: a site that shows the desktop layout shrunk onto a phone is missing the viewport tag, <meta name="viewport" content="width=device-width, initial-scale=1">, and usually a layout that adapts to small screens. Add the tag to every page's <head>, then make sure the layout reflows to a single column.

On a modern theme or site builder that is a small fix. On an old fixed-width site, the tag alone makes things worse, and the real fix is a responsive rebuild.

The site isn't built for phones

Serious Shown in the checker's Speed tab as “Not built for mobile”.

The checker flags your homepage when its <head> has no <meta name="viewport"> tag. Every site designed for phones has one, so a missing tag almost always means the site was built only for desktop screens.

Why it matters

Without the tag, a phone browser pretends its screen is a desktop monitor, typically around 980 pixels wide, lays the page out at that width, and shrinks it to fit (MDN: viewport meta tag). Visitors get tiny text and links too small to tap, and have to pinch and zoom to read your phone number. Your analytics will show how many of your own visitors arrive on phones; that is the share of customers getting this experience.

Google also reads your site the way a phone does. Since October 2023 it has used the mobile version of every site's content, crawled with a smartphone crawler, for indexing and ranking (Google: mobile-first indexing has landed). What phone visitors see is what Google judges (Google: mobile-first indexing best practices).

It is an accessibility problem too. The WCAG standard asks that content work at a width of 320 CSS pixels without scrolling sideways (WCAG 1.4.10 Reflow), and that tap targets be at least 24 by 24 CSS pixels or spaced well apart (WCAG 2.5.8).

How to fix it

Step one is the tag. Add it inside <head> on every page:

<meta name="viewport" content="width=device-width, initial-scale=1">

Don't add user-scalable=no or a low maximum-scale. They stop people zooming, which MDN warns harms people with low vision, and WCAG requires that text can be enlarged to 200% (WCAG 1.4.4).

Step two is the layout. The tag tells the phone to use its real width; the page then has to fit it. If the design is a fixed 960-pixel box, adding the tag gives visitors a page they must scroll sideways, which is worse than before. A responsive layout uses flexible widths, images that shrink (img { max-width: 100%; height: auto; }) and CSS media queries that stack columns on narrow screens (web.dev: responsive design basics).

WordPress

Current WordPress themes, including the default ones, are responsive and add the tag themselves. If yours doesn't, it is probably an old or abandoned theme. Switching to a maintained responsive theme is the usual fix; test it on a staging copy first, because menus, widgets and page layouts may need setting up again. Don't paste the tag into an old theme's header and stop there unless you've checked the layout reflows.

Wix, Squarespace and Shopify

These platforms add the viewport tag for you, so this finding is rare there. If you see it, check whether the homepage is a custom HTML embed or a page served from somewhere else, and contact the platform's support.

Hand-coded or very old sites

Sites built with tables for layout, fixed pixel widths or Flash-era templates can't be made mobile-friendly with one tag. A developer can sometimes retrofit a stylesheet, but by the time the menus, images and forms are reworked it is usually less effort to rebuild on a responsive layout and keep the same addresses so you don't lose search rankings. That is the kind of rebuild our web development work covers.

How to check it's fixed

Open the site on a real phone. Text should be readable without zooming, nothing should run off the right edge, and buttons should be easy to tap.
On a computer, Chrome DevTools' device toolbar shows the page at phone sizes (Chrome docs: device mode). Try 320 and 375 pixels wide.
Run the website checker again. The finding goes away once the tag is there, and the Lighthouse block, which loads the page as a simulated phone, shows how the layout performs. Lighthouse also flags a missing or zoom-blocking viewport tag.

Once the layout works on phones, the next things to check are image sizes and speed: see image optimization and website speed.

Sources

Common questions

How do I know if my website is mobile-friendly?

Open it on a phone: you should be able to read it without zooming or scrolling sideways. The website checker also flags a missing viewport tag and runs Google's Lighthouse on a simulated phone.

What is the viewport meta tag?

A line in the page's head, <meta name="viewport" content="width=device-width, initial-scale=1">, that tells phones to lay the page out at their real screen width instead of a desktop width of around 980 pixels.

Does Google rank mobile-friendly sites higher?

Google indexes and ranks every site using the version a smartphone sees. If the content is hard to use or missing on a phone, that is the version Google judges.

Can I make an old website mobile-friendly without rebuilding it?

Sometimes, if the layout can be reworked with new CSS. Sites built on fixed widths or tables usually can't be fixed with one tag, and a rebuild that keeps the same page addresses is often less work.

Should I stop visitors zooming on my site?

No. Settings like user-scalable=no or maximum-scale=1 block zooming, which shuts out people with low vision. Leave zoom enabled.

Check how your site looks to a phone. The website checker looks for the viewport tag and runs Google's Lighthouse on a simulated phone, alongside security, SEO and email checks. If your site needs a responsive rebuild, tell us about it.