Explain the behaviour of mobile browsers when meta viewport tag is not included

Question

I have a div with width set to 800px. When I view it on my laptop it is shown as intended. But when I visit the web page on the phone, (or just use iPhone 6 view using chrome developer tools) I would expect that div to go beyond the width of the screen, since iPhone 6 width is only 375 points (CSS pixels).

Now I know that after including <meta name="viewport" content="width=device-width,initial-scale=1"> it will work as intended. It indeed does. But I would love to know what a mobile browser does there by default when the meta tag is not present. It seems that it "sees" the width of the screen to be approx. 980px (even though it's not) and scales everything accordingly. So to fill the full width of the phone I'd use width: 980px. But where does this number come from? Can't quite figure it out.

Answer 1

You must have missed the early days of the internet in your hands, before the meta viewport feature and "responsive design" came about. In an attempt to fit the website on your screen, browsers would attempt to zoom out and give you a birds eye view of the website - sort of like standing 10 feet away from your desktop screen.

You would then zoom in and out to interact with different portions of the website. Different browsers/devices implemented this zooming differently. Some attempted to find the widest part of your website and zoom out enough to include it, others might have just assumed that your site fits inside a certain width and zoom out to fit.

Back in the day, 980 was the defacto standard width for websites as it was sure to fit on most people's desktop monitors. So it stands to reason that your device is making the assumption "this clearly is not a responsive site, meaning it was likely built 10 years ago, pretend like the screen is 980px wide".