Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-round-display-1] Update viewport-fit to property of viewport meta element #11757

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+25 −28
Open

[css-round-display-1] Update viewport-fit to property of viewport meta element #11757

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 25 additions & 28 deletions css-round-display-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,23 +217,15 @@ For example, when rendering to PDF, the shape is known to be a rectangle, so 'sh
''true'' while ''shape: round'' to ''false''
</p>

Extending the @viewport rule {#extending-viewport-rule}
Extending the viewport <code class=html>&lt;meta&gt;</code> element {#extending-viewport-meta}
==================================================

<h3 id="viewport-fit-descriptor">The 'viewport-fit' descriptor</h3>
<h3 id="viewport-fit-property">The 'viewport-fit' property</h3>

'viewport-fit' can set the size of the visual viewport.
The <dfn export><code>viewport-fit</code></dfn> property is recognized in the
[[css-viewport#viewport-meta]].
'viewport-fit' can set the size of the layout viewport.

<pre class=descdef>
Name: viewport-fit
For: @viewport
Value: auto | contain | cover
Initial: auto
Percentages: N/A
Computed value: as specified
</pre>

The initial layout viewport seen through the physical screen of the device.
On rounded screen, the part of the page that’s currently shown on-screen is round but
the viewport is rectangular.
Because of this, depending on the size of the viewport, some part of the page may be clipped.
Expand All @@ -245,7 +237,7 @@ Because of this, depending on the size of the viewport, some part of the page ma
</figcaption>
</figure>

'viewport-fit' can control the clipped area by setting the size of the visual viewport.
'viewport-fit' can control the clipped area by setting the size of the layout viewport.

Values have the following meanings:
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In our implementation there seems to be no difference between auto and contain, it may make sense to just remove the auto value and specify the default behavior is contain, though I tried to keep this PR to a strictly editorial update of following the change in the css-viewport spec.


Expand Down Expand Up @@ -293,10 +285,8 @@ If it have to be guaranteed that any part of the web page isn’t hidden, avoidi

When the 'viewport-fit' is specified with <a href="#valdef-viewport-fit-contain">contain</a>, the initial viewport is applied to the largest inscribed rectangle of the display.

<pre class="lang-css">
@viewport (viewport-fit: contain) {
/* CSS for the rectangular design */
}
<pre class="lang-html">
&lt;meta name="viewport" content="viewport-fit=contain"&gt;
</pre>

<figure>
Expand All @@ -308,16 +298,16 @@ If it have to be guaranteed that any part of the web page isn’t hidden, avoidi

When <a href="#valdef-viewport-fit-cover">cover</a> is given to the 'viewport-fit', the initial viewport is applied to the circumscribed rectangle of the display.

<pre class="lang-css">
@viewport {
viewport-fit: cover;
}
@media (shape: round){
/* styles for the round design */
}
@media (shape: rect){
/* styles for the rectangular design */
}
<pre class="lang-html">
&lt;meta name="viewport" content="viewport-fit=cover"&gt;
&lt;style&gt;
@media (shape: round){
/* styles for the round design */
}
@media (shape: rect){
/* styles for the rectangular design */
}
&lt;/style&gt;
</pre>

<figure>
Expand Down Expand Up @@ -479,6 +469,13 @@ Use Cases {#usecases}
Changes {#changes}
==================================================

<h3 id="changes_from_December_22_2016">
Changes from <a href="http://www.w3.org/TR/2016/WD-css-round-display-1-20161222/">December 22<sup>th</sup> 2016</a> version</h3>

<ul>
<li>Updated 'viewport-fit' to property of viewport <code class=html>&lt;meta&gt;</code> element.</li>
</ul>

<h3 id="changes_from_March_01_2016">
Changes from <a href="http://www.w3.org/TR/2016/WD-css-round-display-1-20160301/">March 1<sup>th</sup> 2016</a> version</h3>

Expand Down