[css-device-adapt] Decoupling zoom and width/height

The current constraining procedure has a coupling between zoom and auto  
widths/heights (6-9) and extending widths/heights to fill the viewport for  
a non-auto zoom (10-11).

These stem from the Safari iOS meta viewport legacy.

You can use a meta viewport tag with content="initial-scale=2" to get a  
viewport which has a width/height that is 50% of the initial viewport  
width/height. With an @viewport rule, you don't need to use zoom to  
achieve that since you can have percentage lengths. For instance  
"@viewport { width: 50%; height: auto; }".

I would like to decouple the zoom from width/height by letting auto  
width/height rely on non-auto width/height and initial viewport only. In  
short, an auto width should get a width from the height and the initial  
viewport aspect ratio. Vice versa for height. If both width and height are  
auto, they will get initial viewport width and height respectively.

I suspect the "extend width/height when both zoom and width is non-auto"  
behavior is to handle the case content="width=320,initial-scale=1" which  
was used in Safari before device-width was available. Extending the  
width/height to fill the initial viewport would make this behave as  
width=device-width on different size displays like the iPad. I don't see a  
use-case for this with @viewport apart from getting a backwards compatible  
meta viewport implementation, which should be possible in the property  

Proposal, rule-wise:

Replace step 6 and 7 with:

   - If width and height are both ‘auto’, set width = initial-width

and drop step 10 and 11.

I have not worked out the details for the meta viewport to @viewport  
mapping in chapter 11 to keep the same meta viewport behavior, but it  
looks doable. I'll get back to that.

Rune Lillesveen

Received on Wednesday, 31 October 2012 07:58:32 UTC