TL;DR
When viewing my webpage on a device with a viewport thinner than 980px, everything becomes smaller than it should be, and the page itself reports the width to be stuck at 980px. In my CSS, @media media queries that check the page's width for values below 980px never get activated because of this. How do I prevent this?
Repro
You'll observe this on any page, even a simple one with one line of text.
To simulate a device, I'm using my browsers built in functionality. Both Chrome and Firefox have a similar feature, in Chrome it's called "Device Toolbar" and in Firefox it's called "Responsive Design Mode", both can be found in the Developer Tools menu.
In Firefox, before the issue shows itself, you also need to enable "touch simulation".
What you'll find is that when the viewport is wider than 980px, everything looks okay. But once you make your viewport smaller than that, everything becomes really really small:
Why does this happen and how do I prevent it?
Why this happens
This is something mobile browsers will do automatically on pages without the
viewportmeta tag, because old websites are often not made for mobile devices and would look weird if rendered on not-so-wide screens. If your page doesn't have this tag, then mobile browsers assume it won't work well on screens with small widths, so they render the page at a minimum width of 980px to keep the original layout intact, and then scale it down to fit on your screen. This is why everything looks small.I recommend reading this page on the MDN Web docs, it's written in a very understandable way: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
Solution
Simply add this to your page's
<head>element:width=device-widthtells the browser to render the page using the device's resolution as the width for the viewport, no weird scaling tricks.initial-scale=1sets the zoom level when you open up the page. Even though this seems redundant (the MDN page I linked above states that the default value is already 1), you'll still want to add it: