Viewports and broken media queries
June 23, 2024
Just now I was struggling with writing a basic media query in some CSS. I’d reduced the problem down to just trying to get the background colour be red when the page was <700px wide when using the responsive preview developer tool in Chrome and it just wasn’t working, unless I made the max width much larger. Then a vague memory of “viewports” entered my mind…
tl;dr add this to the <head> of your HTML and bear in mind viewports don’t always match the dimensions you’re presented as a viewer!
<meta name="viewport" content="width=device-width, initial-scale=1" />