What A Difference A Space Makes
Sunday 2nd July, 2017 17:58 Comments: 0
I had a line of code in a website I'm working on in my spare time:
<meta name="viewport" content="width=device-width, initial-scale=1">
This line tells the browser how to deal with content on different sized devices. The line above is essentially identical to the example given by W3 Schools.
This works perfectly in IE, and in Chrome Dev on Android. I then tried it on Chrome 59 on the desktop and none of the media queries were working as expected. I did a quick Google search and found someone's advice to include the meta tag. I looked closer and spotted they hadn't included a space between the width and initial-scale parameters. I removed the space and reloaded the page. Chrome on the desktop was happy. The other browsers remain happy too.
It's bad enough having to mess about with things like box-sizing in CSS, but quirks like a single space causing the viewport to fail spectacularly in Chrome is quite annoying.
At least the new site looks pretty good at various sizes thanks to its responsive web design.
<meta name="viewport" content="width=device-width, initial-scale=1">
This line tells the browser how to deal with content on different sized devices. The line above is essentially identical to the example given by W3 Schools.
This works perfectly in IE, and in Chrome Dev on Android. I then tried it on Chrome 59 on the desktop and none of the media queries were working as expected. I did a quick Google search and found someone's advice to include the meta tag. I looked closer and spotted they hadn't included a space between the width and initial-scale parameters. I removed the space and reloaded the page. Chrome on the desktop was happy. The other browsers remain happy too.
It's bad enough having to mess about with things like box-sizing in CSS, but quirks like a single space causing the viewport to fail spectacularly in Chrome is quite annoying.
At least the new site looks pretty good at various sizes thanks to its responsive web design.