4 ms·
<meta name=viewport content="width=device-width,initial-scale=1"> Excuse my ignorance: what the heck does this achieve?!
by lrem 5y ago
<meta name=viewport content="width=device-width,initial-scale=1">
Excuse my ignorance: what the heck does this achieve?!
- ohazi 5y agoIt's an incantation to make the page look slightly less stupid on a phone. https://www.w3schools.com/css/css_rwd_viewport.asp https://www.w3schools.com/css/css_rwd_viewport.asp for an example image https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_m... for more detailed info
- SahAssar 5y agoIt sets mobile browsers use actual widths and not emulate desktop width.
- la_fayette 5y agoit is not exactly the actual width of the device, but the default viewport width, given in CSS pixels. E.g. for the iphone 6 it is 375 pixel, although the physical width is 750 pixel...
- SahAssar 5y agoYeah, but the same is true for desktops/laptops that use scaling. I think that people are used to the fact that 1 render pixel does not always equal 1 physical pixel.
- hawski 5y agoSo the html looks as god intended on mobile devices. It became necessary, because web pages squeezed to mobile sizes were looking terrible with all those sidebars bent and excessive padding and margins. So Apple (I believe it was them) made this workaround, by default your phone renders pages scaled, like it's a window to your desktop computer's maximized browser. Then it looked good. But what about pages that are responsive or just look good no matter the window size? That's the line that needs to be there.