Try it yourself
Two thirds of this shop's visitors are on a phone, and on a phone the page loads zoomed out with text too small to read.
Which line is causing it?
-
Character encoding. Needed, but it has nothing to do with how the page fits a screen.
-
This is the one. It tells a phone to pretend it is 1200 pixels wide, so the whole desktop layout gets shrunk to fit. What you want is width=device-width, initial-scale=1 — use the real width of the actual device.
-
The stylesheet may well contain perfectly good mobile rules. They cannot help while the page is being told the screen is 1200 pixels wide.
-
This tints the browser chrome on some phones. Cosmetic, and correct.
Pick a line. Every one of them has an answer.
Show me the answer
<meta name="viewport" content="width=1200">
This is the one. It tells a phone to pretend it is 1200 pixels wide, so the whole desktop layout gets shrunk to fit. What you want is width=device-width, initial-scale=1 — use the real width of the actual device.
The written version
The one tag that makes a site mobile-friendly →
How to check your own site for this, what to change, and how to confirm it worked.
Now the real thing
Run this check on your own site.
The same check, plus twenty-nine others, against your actual pages. Free, no account, about a minute.