3 ms·

> <meta name=viewport content="width=device-width, initial-scale=1"> > This snippet is copy and pasted a whole lot around the web. Most people don't explain ho

> <meta name=viewport content="width=device-width, initial-scale=1"> > This snippet is copy and pasted a whole lot around the web. Most people don't explain how it actually functions though. "width" sets the initial width to the mobile's physical display width in 100% pixels. I still don't get this - if the browser is the width of the device, why doesn't the site flow to 100% of the browser?

SahAssar 6y ago
It's because mobile browsers have to deal with sites built only for desktops. So if they don't get this tag they wil emulate a desktop resolution but on a mobile screen. The tag sets the width to the devices actual width (although pixel scaling can change the display resolution) and the initial scale sets the scale to not imitate a desktop.
giantrobot 6y ago
The original iPhone's width in portrait orientation was 320px, the viewport was 980px. When a page loaded it was rendered to a viewport 980px wide, like a browser window 980px wide. Without setting a viewport setting Safari would render a page as if it was a 980px side browser window. The viewport meta tag let's you adjust this virtual window size. You can set it to whatever value you want but "device-width" will just use the screen's current width according to its current orientation. You can add it to a page's header and in many cases it'll look way better on mobile even without specific CSS targeting mobile. The default viewport size of the original iPhone was in place to let it use the "normal" web. At the iPhone's introduction this was a big deal because other smartphone browsers worked best with simple "mobile" layouts. Safari on the iPhone rendered web pages as they looked on the desktop. Making the viewport sized to the display usually makes it so a user doesn't need to zoom in to read text or horizontally scroll to read wonder content. This behavior makes modern mobile browsers render pages more like old mobile browsers where the viewport was usually the portrait screen width (320px typically).
- masklinn 6y ago
  Usefully though inconveniently for my purposes https://shachaf.net/w/b-trees https://shachaf.net/w/b-trees had this exact issue when it first made the rounds, despite the simplicity of the page it was rather difficult to read on most mobile devices as it did not have a viewport meta, so you’d get a pretty tiny font and it would not reflow when zoomed to a readable level.
  - giantrobot 6y ago
    With or without the viewport meta tag zooming a page won't (and shouldn't) cause the page contents to re-flow. When zooming the viewport size isn't changing as if you had changed the window size. Switching orientations or opening a new window on iOS change the viewport dimensions and will cause a re-flow but not zooming. Besides setting the viewport width you can set a couple CSS properties on block elements to keep stuff more mobile friendly. I suggest `max-width: 100%;` and `overflow-x: scroll;`. This would keep for instance those `<pre>` blocks on your page from causing a horizontal scroll on mobile.

SahAssar 6y ago

It's because mobile browsers have to deal with sites built only for desktops. So if they don't get this tag they wil emulate a desktop resolution but on a mobile screen. The tag sets the width to the devices actual width (although pixel scaling can change the display resolution) and the initial scale sets the scale to not imitate a desktop.

giantrobot 6y ago

The original iPhone's width in portrait orientation was 320px, the viewport was 980px. When a page loaded it was rendered to a viewport 980px wide, like a browser window 980px wide. Without setting a viewport setting Safari would render a page as if it was a 980px side browser window. The viewport meta tag let's you adjust this virtual window size. You can set it to whatever value you want but "device-width" will just use the screen's current width according to its current orientation. You can add it to a page's header and in many cases it'll look way better on mobile even without specific CSS targeting mobile. The default viewport size of the original iPhone was in place to let it use the "normal" web. At the iPhone's introduction this was a big deal because other smartphone browsers worked best with simple "mobile" layouts. Safari on the iPhone rendered web pages as they looked on the desktop. Making the viewport sized to the display usually makes it so a user doesn't need to zoom in to read text or horizontally scroll to read wonder content. This behavior makes modern mobile browsers render pages more like old mobile browsers where the viewport was usually the portrait screen width (320px typically).

masklinn 6y ago
Usefully though inconveniently for my purposes https://shachaf.net/w/b-trees https://shachaf.net/w/b-trees had this exact issue when it first made the rounds, despite the simplicity of the page it was rather difficult to read on most mobile devices as it did not have a viewport meta, so you’d get a pretty tiny font and it would not reflow when zoomed to a readable level.
- giantrobot 6y ago
  With or without the viewport meta tag zooming a page won't (and shouldn't) cause the page contents to re-flow. When zooming the viewport size isn't changing as if you had changed the window size. Switching orientations or opening a new window on iOS change the viewport dimensions and will cause a re-flow but not zooming. Besides setting the viewport width you can set a couple CSS properties on block elements to keep stuff more mobile friendly. I suggest `max-width: 100%;` and `overflow-x: scroll;`. This would keep for instance those `<pre>` blocks on your page from causing a horizontal scroll on mobile.