2 ms·

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’

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.)
  - lapcat 3y ago
    It should be noted that some of the apparent zooming on rotation to landscape is just text size adjustment: https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-a... This can be stopped as in the article: html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; }

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.)
- lapcat 3y ago
  It should be noted that some of the apparent zooming on rotation to landscape is just text size adjustment: https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-a... This can be stopped as in the article: html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; }