Meta viewport syntax - comma or semi-colon?
TL;DR: If you’re using a semi-colon to separate values in your viewport meta tag, your site may break! Use a comma instead.
Browsers can be pretty forgiving most days, they do their best to fix our coding mistakes; but it’s a tough job. Most days, they manage to get it right, but trying to fix all the possible error cases is pretty hard. Worse yet, sometimes one browser fixes our code for us, while others don’t.
The viewport meta tag seems to be one of those elements that’s a little bit persnickety. The CSS Device Adaptation spec says the correct syntax uses a comma to separate the values. Unfortunately some sites use a semi-colon, which causes the browser to ignore your viewport settings completely!
Correct Syntax #
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Incorrect Syntax #
<meta name="viewport" content="width=device-width; initial-scale=1.0" />If you want to see this in action and how bad things can look, use the remote debugger with Chrome for Android Beta to change the comma to a semi-colon in the viewport meta tag on Google.com. The site will suddenly go from looking good, to looking awful.
The Developer Tools also warn you in the Console when it comes across an invalid viewport meta tag with the warning: Viewport argument value "device-width;" for key "width" is invalid, and has been ignored. Note that ';' is not a separator in viewport values. The list should be comma-separated.
Go make awesome, but use a comma!