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?
CC0 license
I don't think there is a good way; this is what PPK is asking for with `device-fixed`. If there is a way, he'd be the one to know.
(Side note: if you add
minimum-width=1to the viewport declaration, mobile Chrome can rasterize the root layer on the GPU, which greatly speeds up reflow.)Reply?
Er,
minimum-scale=1. My bad.Reply?
* {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?
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?
Does this help?
``` html { width: 100vw; overflow-x: hidden; } ```
Reply?