The viewport meta tag: one line that makes mobile work

Key takeaways

The viewport meta tag is a single line in a web page's code that tells a phone to display the page at the phone's own width. Without it, the phone pretends to be a desktop and shrinks everything. With the wrong settings, it stops visitors zooming. It takes a minute to check and is the foundation of every mobile layout.

• Without a viewport tag, phones draw the page about 980px wide and shrink it to fit.
• The correct setting is width=device-width with initial-scale=1.
• Settings that disable zoom harm visitors with low vision.
• Every page template needs the tag, not just the homepage.

What is the viewport meta tag?

The viewport meta tag is an instruction in the head of an HTML page that tells mobile browsers how wide to treat the page and how far to zoom it initially. The viewport is the visible area of a web page on a device. The tag links that area to the device's real screen width.

It exists because early smartphones had to display websites built only for desktop monitors. Their browsers assumed every page was wide and zoomed out to show the whole thing. The viewport tag is how a modern site says: this page is built for small screens, show it at actual size.

• Why mobile-friendly web design is essential for UK businesses
• What is responsive web design? A plain-English guide

What happens without it?

Without the tag, mobile browsers render the page at a desktop screen width, usually about 980 pixels according to Google's web.dev guidance, and then scale it down to fit the phone. The visitor sees a miniature desktop page with unreadable text and has to pinch and drag to use it.

It also disables the responsive layout. Media queries respond to the viewport width. If the phone reports 980 pixels, the stylesheet's small-screen rules never apply, however well they were written. A fully responsive design with no viewport tag behaves like a fixed desktop site.

What is the correct setting?

The correct setting, recommended by Google and MDN, is a meta element named viewport with the content width=device-width, initial-scale=1. The first part matches the page width to the device width. The second sets the starting zoom to 100% and keeps the layout sensible when the phone is rotated.

• width=device-width: use the device's real width in CSS pixels.
• initial-scale=1: start at 100% zoom, no shrinking.
• Place it in the head of every page template.
• Do not add a fixed width such as width=1024.
• Do not add maximum-scale=1 or user-scalable=no.

Which viewport mistakes cause problems?

Three mistakes are common. The tag is missing on some templates, often landing pages or a blog built separately from the main site. A fixed width is set, forcing every phone to show a wide page. Or zoom is disabled to stop the page moving when a form field is tapped.

Disabling zoom is the most harmful. Settings such as user-scalable=no or maximum-scale=1 are intended to prevent visitors enlarging the page. People with low vision rely on pinch zoom, and WCAG success criterion 1.4.4 expects text to be resizable up to 200%. If the reason was the iPhone zooming into form fields, the right fix is 16px text in the fields.

• Font size for mobile websites: what is readable?
• Mobile accessibility: the WCAG checks for small screens

How do you check your own site?

On a laptop, open the page in Chrome, right-click and choose View page source, then search for the word viewport. You should find one meta tag with width=device-width and initial-scale=1 and nothing that limits scaling. Repeat for each type of page: home, service, blog post, landing page and checkout.

• Search the page source for 'viewport' on each template.
• Confirm there is exactly one viewport tag per page.
• Check that pinch zoom works on a real phone.
• Rotate the phone and confirm the layout adjusts.
• Run Lighthouse, which reports a missing or incorrect viewport tag.

• Google's Mobile-Friendly Test has gone: how to test now

What does it cost to fix?

Adding or correcting the tag is a few minutes' work for a developer and should cost next to nothing on a maintained site. If your site is on a website builder or a modern theme, the tag is almost certainly present already.

The cost comes when the tag exposes a deeper problem. Adding it to an old fixed-width site makes the phone show the page at real size, and a 1,000-pixel layout then overflows the screen. In that case the tag is not the fix. The site needs responsive templates, within the indicative £3,000 to £12,000 for a redesign or £5,000 to £20,000 or more for a rebuild.

• Website scrolls sideways on mobile? Causes and fixes
• What it costs to make a website mobile-friendly in the UK

What does the viewport tag not do?

It does not make a site mobile-friendly. It only tells the browser to use the real screen width. Whether the layout then works depends on the stylesheet, and whether the page is usable depends on text size, tap targets, speed and content.

Think of it as switching the lights on. You can now see the room as it is. A correct viewport tag on a well-built responsive site gives a good result, and on a poorly built one it reveals the problems that zooming out was hiding.

• Make your website work properly on mobile

What does this look like in practice?

A pattern we see with paid advertising: the main website is responsive, but campaign landing pages were built in a separate tool years ago and never updated. They have no viewport tag. Visitors arriving from a phone advert see a shrunken desktop page, and the campaign's results are blamed on the audience or the creative.

Because the owner checks the main site, not the landing pages, the problem goes unnoticed. Global Bridge Labs (GBL) checks the page source of every template and every live landing page at the start of a mobile review, since one missing line can undo an entire campaign.

• See client work
• Website Design & Development for UK businesses
• Mobile landing pages: stop paying for clicks that bounce

Next step

View the source of your homepage, one service page and one landing page, and search each for 'viewport'. It is the quickest technical check you can do on your own site.