Re: [csswg-drafts] [css-round-display][mediaquery] Properly define 'viewport-fit'

To answer your questions,

>     When viewport-fit: auto, is it right that the initial viewport 
will not change?

Not really. See the definition I propose above.

>     The result of the examples below have the same meanings?
>         @viewport (viewport-fit: cover) { ... }
>         @viewport (width: auto) { ... }

`@viewport {width: auto; }` is the default value if there's nothing 
else in the UA stylesheet. It does not cancel viewport-fit. Here's how
 they work together:

Let's say with have a round screen with a diameter of 200px. The size 
of the inscribed rectangle is diameter / sqrt(2) = 141 px.

* Example 1: `@viewport { width: auto; viewport-fit: cover; }`
The width and height of the layout viewport and visual viewport are 
200px, so the initial zoom level is 1.

* Example 2: `@viewport { width: auto; viewport-fit: contain; }`
The width and height of the layout viewport and visual viewport are 
141px, so the initial zoom level is 1.

* Example 3: `@viewport { min-width: 400px; viewport-fit: cover; }`
The width and height of the layout viewport  are 400px, and the width 
and height of the visual viewport are 200px, so the initial zoom level
 is 0.5.

* Example 4: `@viewport { min-width: 400px; viewport-fit: contain; }`
The width and height of the layout viewport  are 400px, and the width 
and height of the visual viewport are 141px, so the initial zoom level
 is 0.3525.

You would use example 1 if you have content that takes into account 
rounded corners and has a layout that deals with very small sizes 
well.

You would use example 2 if you have content that **does not** take 
into account rounded corners but has a layout that deals with very 
small sizes well.

You would use example 3 if you have content that takes into account 
rounded corners but has a layout that **does not** deal well with 
small sizes of less than 400px.

You would use example 4 if you have content that **does not** take 
into account rounded corners and has a layout that **does not** deal 
well with small sizes of less than 400px.

The UA stylesheet of mobile browser typically contains `@viewport 
{min-width: 980px;}` (or behaves as if they did), so authors need to 
use `@viewport {width: auto; }` to override that when they have 
designed for small screens. UAs for watches should do the same, as 
specified at 
https://drafts.csswg.org/css-device-adapt/#small-screen-ua


-- 
GitHub Notification of comment by frivoal
Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/171#issuecomment-227349435 
using your GitHub account

Received on Tuesday, 21 June 2016 06:11:15 UTC