viewport 101

 The meta "viewport" setting is so fundamental to the mobile web experience that it's easy to miss, and so therefore weird to correct if you don't know what to look for.

It's the line in the header that tells a device (I'm not even sure if it tends to matter on desktop?) roughly how many pixels the screen should start as.

So here's a more or less normal test page with the viewport set.  (Specifically with the fairly typical formulation <meta name="viewport" content="width=device-width,initial-scale=1">)

If you resize a desktop browser window, all the squares stay about the same size. and the flow layout moves them around. I put a watcher on the resize event so it tells you how wide it thinks the encompassing gray box is. 

Here's the same page without the viewport line. On desktop it is practically identical, but if you go into Chrome's developer tools and toggle the device toolbar, you will see something odd... if you put it in Dimensions: responsive, no matter how wide or narrow you make the window, the offsetWidth is "980" - and the boxes shrink like you were zooming out, they don't rearrange. View the "with viewport set" page  and you'll see the desktop-like behavior is restored.

Notice even though I've set the device width to 480, the box thinks it's 980 across...

What's going on? My guess is in the early days of smartphones that had proper browsers (i.e. the 2007 era iPhone) websites obviously weren't set up for mobile... but a typical laptop window of the day might be around 980 pixels, give or take, and so the initial, unzoomed view started at 980 across, so that the (quite possibly table-based) layout of the sites would make sense. That's why a page without the viewport line seems weirdly zoomed out on a real phone, and why the scaling (of the responsive windows, as if you were using different devices) in chrome is so odd. But if you set the width to viewport width to device-width, you get a more reasonable result (heh, my big iPhone Pro Max starts the device-width at 430; my partner's older iPhone X says 375. But of course that's like px, both are "retina" devices with many more actual pixels than that. Still that's useful... I wasn't quite aware that layouts for phone should be focused on that 400px range...)

Of course you're free to manually specify a starting viewport width, ala  <meta name="viewport" content="width=450;" /> (It's bad form and maybe blocked to try and stop your content from being zoomed; that's a big accessibility no-no)

This came up at work - it took me a while to figure out why we were seeing that second style of zooming in chrome, but it was because we were looking at a code snippet in the browser, and not a whole page (which would presumably set the viewport early on) So even though viewport is fundamental to the mobile web, it makes sense that a lot of UI devs haven't run into it; it's probably set up earlier in the project, like in the "boilerplate" code that launched in, and once you set the width to device-width everything pretty much "just works" like you would expect...