The viewport meta tag
Without a viewport tag, a phone renders your page at desktop width and shrinks it to fit. Text becomes unreadable and buttons become impossible to tap accurately.
What it is
The viewport meta tag tells a mobile browser to lay the page out at the device's own width, rather than pretending to be a roughly 980 pixel wide desktop screen.
It's a single line in the head of the document, and it's the precondition for any responsive design working at all.
Why it matters
Google indexes the mobile version of a site first. A page that renders badly on a phone is being judged in that state.
For a local business the stakes are higher still, because a large share of 'near me' searches happen on a phone, often while the person is standing outside.
What a mobile-friendly page also needs
The viewport tag lets a page fit the screen; the rest of the design decides whether it is usable once it does. Body text should be around 16 pixels or larger. Form fields below 16 pixels make iPhones zoom in when they are tapped, which disorientates people mid-enquiry. Images should scale with the layout rather than forcing the page to scroll sideways.
Buttons and links need room for a thumb. WCAG 2.2 sets a minimum of 24 by 24 pixels for a target or enough space around it, and comfortable targets are larger still. Phone numbers should be tappable links, and the most important action, usually calling or booking, should be easy to reach without scrolling to the bottom of a long page.
Testing on a real phone
Desktop browsers can imitate a phone through their developer tools, and that is a good first check. It catches missing viewport tags, layouts that overflow sideways and text that is far too small. It doesn't catch everything, such as how a pop-up behaves when the keyboard opens or whether a sticky header covers half of a small screen.
So finish on a real device. Load the home page and two or three key pages on a phone over mobile data, then try to do what a customer would: find the phone number, read the prices, fill in the contact form. Anything that takes more than a couple of attempts on a phone is losing enquiries, whatever it looks like on a desktop screen.
Speed on a phone
A page that fits the screen still fails a mobile visitor if it takes too long to appear. Phones are slower than desktop computers and are often on patchy mobile connections. Google measures real visitors' experience through Core Web Vitals: how quickly the main content appears, how quickly the page responds to a tap, and how much the layout jumps around while it loads.
On small business sites the usual culprits are easy to spot. Photos uploaded straight from a camera, several megabytes each, are the most common. So are sliders that load every image up front, several web fonts, and third-party chat, booking or review widgets that each bring their own scripts. Images without set dimensions make the page jump as they arrive, which is what moves a button out from under a finger.
PageSpeed Insights reports both lab measurements and, for busier sites, data from real Chrome users. Resize and compress images before uploading, remove widgets nobody uses, and test again on a phone. The goal isn't a perfect score; it's a page that shows something useful within a couple of seconds on an ordinary connection.
It also pays to check what a mobile visitor sees first. On many small business sites the top of the page on a phone is taken up by a large logo, a full-screen photo or a cookie banner, and the phone number and the main message only appear after a scroll. Reordering the page so the essentials come first costs nothing in speed and often does more for enquiries than any technical fix. Look at the page as a stranger would, on a small screen, and ask whether it is obvious within a few seconds what the business does, where it works and how to get in touch.
How to fix it
- Add the viewport tag to the head of every page.
- Confirm the layout actually responds. The tag alone doesn't make a fixed-width design flexible.
- Check tap targets are large enough and spaced apart, and that text is legible without zooming.
- Avoid disabling zoom. Preventing pinch-to-zoom locks out visitors who need it.
- Compress and resize photos before uploading them, so a phone on a mobile connection isn't downloading camera-sized originals.
What good looks like
<meta name="viewport" content="width=device-width, initial-scale=1">Common mistakes
- Adding the tag to the home page only.
- Using user-scalable=no or maximum-scale=1, which blocks zooming and fails accessibility requirements.
- Assuming the tag makes a desktop-only layout responsive on its own.
- Hiding important content, such as prices or the phone number, on mobile screens to make the layout fit.
Check your own site. ppclift checks this automatically on every page it audits. Run a free audit and see every check on one page, with no account required.
Doing this for a client? This is one of 15 checks. ppclift is SEO lead generation software that audits every local business in a suburb at once, so you can find SEO clients who already need this work. Free plan, no card.