Mobile Viewports WTF

Last updated:

We're refreshing the W3C stylesheet right now, and part of that is requiring a good <meta name=viewport> value so the specs are readable on phones.

We've come up with a pretty decent one so far: width=device-width, initial-scale=1, shrink-to-fit=no. This seems to work well, but I've found it still has a frustrating weakness:

If some element is wider than the initial viewport size, then the size of the viewport that position:fixed elements use is increased to be the widest element's width, with the same aspect ratio as the original viewport size.

Example: say your phone's natural viewport is 320px wide and 640px tall. If there's an element in your page that's 400px wide, the fixpos viewport will end up being 400x800 instead, so anything you fixpos to the bottom will be 160px below the bottom edge of the screen. :(

Does anyone know a way to fix this?

(a limited set of Markdown is supported)

* {max-width: 100%} could probably help, but this would distort proportions of replaced content like images with both dimensions specified explicitly since CSS has unfortunately no ways to maintain original element proportions.

Reply?

(a limited set of Markdown is supported)

My test case; please check if I got it right: http://quirksmode.org/m/tests/shrinktest.html

First things first: which browser exactly? I'm assuming Chrome 48, since I found the bug there. It's also present in Chrome 44, but not in 38 (both Samsung Chromia).

Because this IS a bug. The layout viewport is the frame of reference for fixed positioning, and according to document. documentElement. clientWidth/Height the layout viewport has the expected dimensions, ignoring the very wide element. Thus the fixed layer should be relative to those dimensions; as it in fact is in Firefox, Safari, and Samsung Chromium 38.

In my test it doesn't matter if you include shrink-to-fit=no or not, so it's just a matter of a wrong reference viewport for position: fixed.

As to solutions, offhand I can't think of any that don't involve JavaScript. I'll think about it a bit more, but the bug is fairly fundamental, so don't get your hopes up too high.

Reply?

(a limited set of Markdown is supported)

Does this help?

``` html { width: 100vw; overflow-x: hidden; } ```

Reply?

(a limited set of Markdown is supported)