RE: [css-device-adapt] How should initial viewport contribute to layout?

>In Chrome for Android we're currently always aligning with the visual viewport, but I agree that has bad results in many cases and we're currently redesigning this.

>The use cases you mention apply to align to page content on the X axis, but there tend to be fewer problems on the Y axis.  For that reason we're considering aligning "position: fixed" elements to the initial viewport on the X axis, but the visual viewport on the Y axis.  That way, the use cases you mention still work OK, but top and bottom fixed-pos bar would always remain onscreen and it becomes possible to interact with them without excessive fiddling.

It really depends on the scenario.  One example to consider is lightbox photo viewers [1] where the fixed content overlays the entire screen.  If the fixed content is attached to the layout viewport on one axis and the visual viewport on the other, then the user will only be able to pan in one direction (and the photo will just be clipped in the other).  I suspect that approach will also have issues with tall (i.e. 100% height) fixed sidebars [2] -- either relayout will need to happen in response to the pinch zoom or else the bottom of the sidebar will be offscreen.  Also, for horizontally scrolling scenarios the relative safety of each axis tends to be reversed.

FWIW I also think it's less confusing to develop against if the same viewport is used consistently for sizing/attaching each element.  As one example:

/* Does this relayout to a rectangle as the user pinches in?  Does the width shrink? */
.hopefully-a-square {
    position: fixed;
    width: 1vh;
    height: 1vh;
}

Thanks,
-Matt

[1] Note, you may need to click the "fullscreen" button to get to the scenario I'm describing: http://www.flickr.com/photos/jo_00/12107715535/in/explore-2014-01-23/lightbox/

[2] http://thenextweb.com/

Received on Thursday, 13 February 2014 00:10:43 UTC