3 ms·

> To tell the browser that a site is providing an optimised experience for all viewport sizes, you can include the following meta tag in the document <head>: >

by lapcat 3y ago

> To tell the browser that a site is providing an optimised experience for all viewport sizes, you can include the following meta tag in the document <head>: > <meta name="viewport" content="width=device-width, initial-scale=1" /> I see this a lot, but it's actually cargo culting, and all you need is initial-scale. "You do not need to set every viewport property. If only a subset of the properties are set, then Safari on iOS infers the other values. For example, if you set the scale to 1.0, Safari assumes the width is device-width in portrait and device-height in landscape orientation." https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW26 https://developer.apple.com/library/archive/documentation/Ap...

zagrebian 3y ago
That’s Apple. What about Android?
nhardy 3y ago
It looks like that advice is specific to iOS. Recommendations elsewhere specify that both device-width and initial-scale should be included for compatibility with all mobile devices, e.g. https://developer.chrome.com/docs/lighthouse/pwa/viewport/ https://developer.chrome.com/docs/lighthouse/pwa/viewport/
chrismorgan 3y ago
To begin with: that documentation looks to be ancient, so be careful as it may not reflect reality any more, though nothing stands out as obviously wrong. You’ve skipped over the difference: > Safari assumes the width is device-width in portrait and device-height in landscape orientation Whereas width=device-width means device-width when in landscape (device-width now being the longer axis), which is I think always going to be what you actually want. If what they document is correct, and it does sound right for how I recall it being described some years back, that the page effectively zooms in when you rotate, then it’s just not what you want. Testing in desktop Chromium’s responsive design mode, it does seem to behave reasonably in the presence of <meta name=viewport content=initial-scale=1>. I haven’t checked anywhere else. But if you specify width=device-width, then initial-scale=1 is actually superfluous, that then being the default. I understand that it was part of the common incantation in order to work around Safari orientation change bugs which I think have been fixed for a few years now, but I don’t have anything to confirm it on (really wish they’d provide an emulator for non-Apple platforms) and have never had anyone answer it when I’ve mentioned it here on HN.
- lapcat 3y ago
  > To begin with: that documentation looks to be ancient, so be careful as it may not reflect reality any more, though nothing stands out as obviously wrong. I've also tested it. In fact I came upon that document in the process of testing, to determine what exactly "width=device-width, initial-scale=1" means. > But if you specify width=device-width, then initial-scale=1 is actually superfluous, that then being the default. This is not true. If you have wide non-text content, for example an img, then the page will not necessarily appear at scale 1.
  - chrismorgan 3y ago
    > If you have wide non-text content, for example an img, then the page will not necessarily appear at scale 1. Hmm, interesting. Thanks for the correction; I confirm this in Chromium’s responsive design mode. Also that (as expected) if you’ve got suitable `max-width: 100%; height: auto` incantations so that it doesn’t actually overflow, this doesn’t apply, and you stay with an initial scale of 1. Frankly, I think that removing initial-scale=1 while developing might be a good thing, since it’ll make overflow more obvious, but I now have a clearer understanding of initial-scale’s purpose and default value. I suppose that means that it’s probably still desirable in general, as most causes of overflow are probably better handled by inducing scrolling rather than scaling the whole document down. Need to file an issue to fix https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_m... which claims the default is 1, then. Going to add a blog post about this to my TODO list as well, since I had erroneously thought it was solely about that Safari orientation change bug, and have mentioned that belief a few times here on HN and probably misled others thereby. (Found some potentially relevant spec, too: https://www.w3.org/TR/css-device-adapt/#handling-auto-zoom https://www.w3.org/TR/css-device-adapt/#handling-auto-zoom, though I’m not sure quite what the situation is, HTML Standard seems to cite that spec but a csswg draft, and that link’s a 404, and the @viewport stuff hasn’t ever been implemented and has been retired <https://github.com/w3c/csswg-drafts/issues/4766 https://github.com/w3c/csswg-drafts/issues/4766>, so I’m not sure if there’s actually any nominally-active spec for meta viewport at present.)
    - 3y ago

by lapcat 3y ago

zagrebian 3y ago

That’s Apple. What about Android?

nhardy 3y ago

It looks like that advice is specific to iOS. Recommendations elsewhere specify that both device-width and initial-scale should be included for compatibility with all mobile devices, e.g. https://developer.chrome.com/docs/lighthouse/pwa/viewport/ https://developer.chrome.com/docs/lighthouse/pwa/viewport/

chrismorgan 3y ago

To begin with: that documentation looks to be ancient, so be careful as it may not reflect reality any more, though nothing stands out as obviously wrong. You’ve skipped over the difference: > Safari assumes the width is device-width in portrait and device-height in landscape orientation Whereas width=device-width means device-width when in landscape (device-width now being the longer axis), which is I think always going to be what you actually want. If what they document is correct, and it does sound right for how I recall it being described some years back, that the page effectively zooms in when you rotate, then it’s just not what you want. Testing in desktop Chromium’s responsive design mode, it does seem to behave reasonably in the presence of <meta name=viewport content=initial-scale=1>. I haven’t checked anywhere else. But if you specify width=device-width, then initial-scale=1 is actually superfluous, that then being the default. I understand that it was part of the common incantation in order to work around Safari orientation change bugs which I think have been fixed for a few years now, but I don’t have anything to confirm it on (really wish they’d provide an emulator for non-Apple platforms) and have never had anyone answer it when I’ve mentioned it here on HN.

lapcat 3y ago
> To begin with: that documentation looks to be ancient, so be careful as it may not reflect reality any more, though nothing stands out as obviously wrong. I've also tested it. In fact I came upon that document in the process of testing, to determine what exactly "width=device-width, initial-scale=1" means. > But if you specify width=device-width, then initial-scale=1 is actually superfluous, that then being the default. This is not true. If you have wide non-text content, for example an img, then the page will not necessarily appear at scale 1.
- chrismorgan 3y ago
  > If you have wide non-text content, for example an img, then the page will not necessarily appear at scale 1. Hmm, interesting. Thanks for the correction; I confirm this in Chromium’s responsive design mode. Also that (as expected) if you’ve got suitable `max-width: 100%; height: auto` incantations so that it doesn’t actually overflow, this doesn’t apply, and you stay with an initial scale of 1. Frankly, I think that removing initial-scale=1 while developing might be a good thing, since it’ll make overflow more obvious, but I now have a clearer understanding of initial-scale’s purpose and default value. I suppose that means that it’s probably still desirable in general, as most causes of overflow are probably better handled by inducing scrolling rather than scaling the whole document down. Need to file an issue to fix https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_m... which claims the default is 1, then. Going to add a blog post about this to my TODO list as well, since I had erroneously thought it was solely about that Safari orientation change bug, and have mentioned that belief a few times here on HN and probably misled others thereby. (Found some potentially relevant spec, too: https://www.w3.org/TR/css-device-adapt/#handling-auto-zoom https://www.w3.org/TR/css-device-adapt/#handling-auto-zoom, though I’m not sure quite what the situation is, HTML Standard seems to cite that spec but a csswg draft, and that link’s a 404, and the @viewport stuff hasn’t ever been implemented and has been retired <https://github.com/w3c/csswg-drafts/issues/4766 https://github.com/w3c/csswg-drafts/issues/4766>, so I’m not sure if there’s actually any nominally-active spec for meta viewport at present.)
  - 3y ago