4

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.

Dalin Huang
  • 11,212
  • 5
  • 32
  • 49
ivanibash
  • 1,461
  • 2
  • 14
  • 37

2 Answers2

3

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".

Ryan Wheale
  • 26,022
  • 8
  • 76
  • 96
  • 1
    Got it, thanks for the complete and detailed answer. Haha I was around for the birdeye view websites, but never thought about what's happening there before going into web development. So if I understood you right 980px is just a number people sort of agreed on based on the size of monitors. And then the website scales everything by 'devise-width/980' factor. – ivanibash Apr 27 '17 at 17:29
  • Are you referring to the early days of *mobile* internet? I may be wrong but can't recall such behaviour in Mosaic or Netscape. In fact, zoom used to apply only to font size; all-item zoom as we know today was a rather late enhancement. It's also worth noting that HTML has always been responsive, until CSS allowed designers to assign a fixed width for 1024x768 displays (because everybody has a 1024x768 monitor, right?). – Álvaro González Apr 28 '17 at 07:43
  • 2
    @ÁlvaroGonzález - when I said _"early days of the internet in your hands"_ I was indeed referring to mobile devices literally _in your hand_. And while HTML is responsive, per se, almost every website had a ~980px container and no media queries. My point is that the _idea_ of responsive design did not yet exist (I don't consider old fluid sites 'responsive'). I had an old Palm Treo and other pre-iphone devices which all used the zoom out technique. Others like Blackberry and smaller screen phones attempted to strip a site down to pure content. – Ryan Wheale Apr 28 '17 at 18:56
2

if viewport is not configured, mobile browsers show complete website. Mean you will see complete 800px layout in 375 px of iphone 6, 6s and 7. In this case, device pixel ratio is not working. You need to zoom mobile screen to read text.

Avinash Malhotra
  • 596
  • 7
  • 8
  • I think this is true in general, though actual ruleset must indeed be more complex because layouts with no fixed width get zoomed out too and (at least in my own sites) main contents display in a larger font that side boxes. I presume browsers do a lot of guessing. – Álvaro González Apr 28 '17 at 07:45