Check the head of each page for a viewport meta tag. Without it, phones lay the page out about 980 pixels wide and shrink it, so the phone layout never appears. Restore it, then test on real phones.

Sold as responsive, tiny on a phone

A moving company paid for a new website this fall, sold as responsive. At the final meeting the designer narrowed a laptop's browser window, and the menu folded neatly into a button.

On the owner's phone, the site arrives as the whole desktop page shrunk to fit: a tiny logo, three narrow columns and a quote button too small to tap.

People planning a move often look on a phone. Each of them now pinches and scrolls before reading a word.

The theme is responsive. The page is missing one line of code, and without it the phone never asks for the phone layout.

What the missing line tells the phone

Unless a page asks otherwise, Safari on an iPhone and most Android browsers assume it is about 980 pixels wide, the width of a common desktop design.

They draw the page at that width, then shrink the result to fit the screen. Nothing is missing; everything is simply very small.

A responsive theme switches to its phone layout below a set width, such as 768 pixels. A phone behaving as if it were 980 pixels wide never gets there.

The fix is a meta tag named viewport in the head of the page, usually set to width=device-width with an initial scale of 1. It tells the phone to use its real width.

Why the demonstration looked right

Desktop browsers never pretend to be another width. Narrow a window on a laptop, and the phone layout appears whether the tag is there or not.

So the site passed every check in the designer's office. Those checks tested the theme, not the page a phone actually receives.

Only a real phone, or a desktop browser's device emulation, shows the difference. A look on two or three real phones is part of finishing a responsive site.

How to check for the tag

Checking takes a few minutes, and it is worth doing on more than the home page:

The last item catches the common gap. A page built on a separate template often has a separate header, so the line can be present everywhere but there.

How customised headers lose it

In WordPress and similar systems, the head of every page comes from a header file in the theme, and customising a theme often means editing or replacing that file.

Someone adding a tracking code or a web font may paste in the header from the old desktop site. The viewport line disappears with the file it replaced.

Some themes print the line only while a responsive option is switched on, and an option changed in passing removes it without warning.

A child theme has the same weak point. Its header file replaces the parent's completely, so anything missing from the copy is missing from the site.

A worked example

A boat rental company on a lake in the Shuswap rents fishing boats, pontoon boats and kayaks by the hour and the day, from a dock beside a public beach.

With the dock closed for winter, it had its site rebuilt this fall on a responsive theme: the fleet and prices, a map of the launch, and a booking form.

On a phone, the new site showed the desktop page, shrunk. Whoever customised the theme had swapped in the old site's header file, to keep a weather widget and the tracking code.

Restoring the line in the child theme's header fixed most pages. The booking page, on its own template, needed it too, and its booking form had a fixed width that ran off the screen.

Phones now lay each page out at their own width, so the theme's phone rules apply: one column, a menu button and readable prices. The booking form now fits the screen, in time for spring.

What else to test on real phones

With the tag in place, test the pages customers use most: the home page, the main service page, the contact page and every form.

Look for anything wider than the screen. Maps, videos, booking forms and price tables with fixed widths make the whole page slide sideways.

Tap what a customer would tap, from the menu button to the send button, then turn the phone sideways and check again.

Use two real phones, ideally a large new iPhone and a small older Android phone. They show problems that resizing a desktop window hides.

Zooming should still work

Some headers add values to the viewport line that block zooming, such as a maximum scale of 1.

That keeps a layout tidy, but a visitor who needs larger text cannot pinch to enlarge it. A page that only works with zooming blocked has a layout fault the block is hiding.

The line goes missing after launch

The tag is lost more often in later changes than in the build: a new header for a seasonal banner, or a landing page for an advertising campaign.

Whoever changes the header should open two or three pages on a phone afterwards. It takes a minute, and any fault shows up before a customer meets it.

The counter-case

A site that was never responsive is a different case. A fixed-width design has no phone layout to switch to, and adding the line alone can leave phones showing one corner of a page.

There the shrunken view is the honest result of the design, and the fix is a responsive rebuild, not a line of code.

But wherever a theme was sold and paid for as responsive, phones should get its phone layout, and the viewport line is the first thing to check.

Putting the phone layout back

  1. Open the site on your own phone.
  2. Search the page source for the word viewport.
  3. Restore the line in the theme's header file.
  4. Check every template, including booking and landing pages.
  5. Leave zooming available to visitors.
  6. Test forms, maps and tables on two real phones.
  7. Look again after each change to the header.

Step four is the one owners skip. A site can pass on its home page and still shrink the booking page, where a customer was ready to act.

Once phones do get the phone layout, the order in which its columns stack matters next, as explained in sidebar details that drop below everything on a phone.

Frequently asked questions

What does the viewport meta tag do?

It tells a phone to lay the page out at its own width. Without it, phones assume a desktop page about 980 pixels wide and shrink it.

Why did the site look responsive in the designer's demonstration?

Desktop browsers do not pretend to be another width, so a narrowed window shows the phone layout even without the tag. Only real phones reveal the fault.

How can I check whether my site has the tag?

View the source of a page and search for the word viewport. The Mobile Usability report in Webmaster Tools also lists pages without one.

Why would a responsive theme lose the tag?

It lives in the theme's header file. Replacing that file, an incomplete child theme header, or a page on a separate template can each drop it.

Should the viewport line stop visitors from zooming?

Usually not. Blocking zoom keeps layouts tidy but stops visitors who need larger text from enlarging it, so leave pinch zoom available.

Will adding the tag fix any site on a phone?

Only a responsive one. On a fixed-width desktop site, the line alone can make things worse, because there is no phone layout to switch to.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Responsive site still tiny on a phone?

Send us the address, and we will check the header and every template on real phones and tell you what is missing.

Start a Conversation