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

>I found I should have used 'page-scale' instead of 'pinch-scale' to make my equation correct (page-scale = initial-scale * pinch-scale):
>  sizeof(visual viewport) == sizeof(initial viewport) / page-scale

Ah, I see what equation you were going for now.  In that case the equations would be:
sizeof(actual viewport) == sizeof(initial viewport) / page-scale
sizeof(visual viewport) == sizeof(actual viewport) / pinch-scale

Or equivalently:
sizeof(visual viewport) == sizeof(initial viewport) / (page-scale * pinch-scale)


>The modified equation seems still correct when actual viewport and initial viewport has different aspect-ratios:
>  @viewport { width: 480px; height: 480px }, window size is 240x320px, then
>   - initial viewport: 240x320px
>   - actual viewport: 480x480px
>   - initial scale: 0.5
>   - visual viewport: 480x640px

This is an interesting case, since the @viewport rule is specifying an aspect ratio that is different from your window size.  In IE we don't permit this to stretch the content on one axis (the aspect ratio of the actual viewport is always equal to the aspect ratio of the initial viewport), though I think this is what the spec currently permits.  Instead we evaluate the page-scale factors that would be required to satisfy width and height independently, and use the smaller scale factor.  This is (1) because we don't really want to encourage squished content but also (2) to enable scenarios like:

/* by matching the viewport size to the canvas size, I can guarantee that the canvas will always have maximal size without clipping */
/* for example, on a 1920x1080 initial viewport the page zoom will be 1.40625, yielding an actual viewport of ~1365x768 */
@viewport {
    width: 1024px;
    height: 768px;
}

.myGameCanvas {
    width: 1024px;
    height: 768px;

    /* other CSS to ensure the canvas is centered on screen */
}

That said, if I may modify your example to something slightly simpler I think your calculations are correct:
@viewport { width: 480px; }, window size is 240x320px, then
 - initial viewport: 240x320px
 - actual viewport: 480x640px
 - page-scale: 0.5 
 - visual viewport: 480x640px

Thanks,
-Matt

Received on Thursday, 13 February 2014 00:31:13 UTC