8000 csswg-drafts/css-device-adapt/Overview.src.html at 05f4647f7c676c4ce61cac6aa05aa57e8878a592 · w3c/csswg-drafts · GitHub
Skip to content

Overview.src.html

Latest commit

 

History

History
executable file
·
1688 lines (1395 loc) · 67.4 KB

Overview.src.html

File metadata and controls

executable file
·
1688 lines (1395 loc) · 67.4 KB
<h3>The &lsquo;<code class="descriptor">user-zoom</code>&rsquo; descriptor</h3>
<table class="descdef">
<tbody>
<tr>
<td><em>Name:</em></td>
<td><dfn>user-zoom</dfn></td>
</tr>
<tr>
<td><em>Value:</em></td>
<td>zoom | fixed</td>
</tr>
<tr>
<td><em>Initial:</em></td>
<td><span title="zoom!!value">zoom</span></td>
</tr>
<tr>
<td><em>Percentages:</em></td>
<td>N/A</td>
</tr>
<tr>
<td><em>Media:</em></td>
<td>visual, continuous</td>
</tr>
<tr>
<td><em>Computed&nbsp;value:</em></td>
<td>&lsquo;<code class="css" title="zoom!!value">zoom</code>&rsquo; or
&lsquo;<code class="css">fixed</code>&rsquo; as specified.</td>
</tr>
</tbody>
</table>
<p>Specifies if the zoom factor can be changed by user interaction or not.</p>
<p>Values have the following meanings:</p>
<dl>
<dt>&lsquo;<code class="css"><dfn title="zoom!!value">zoom</dfn></code>&rsquo;</dt>
<dd>The user can interactively change the zoom factor.</dd>
<dt>&lsquo;<code class="css"><dfn>fixed</dfn></code>&rsquo;</dt>
<dd>The user cannot interactively change the zoom factor.</dd>
</dl>
<h3>The &lsquo;<code class="descriptor">orientation</code>&rsquo; descriptor</h3>
<table class="descdef">
<tbody>
<tr>
<td><em>Name:</em></td>
<td><dfn>orientation</dfn></td>
</tr>
<tr>
<td><em>Value:</em></td>
<td>auto | portrait | landscape</td>
</tr>
<tr>
<td><em>Initial:</em></td>
<td><span title="auto!!orientation">auto</span></td>
</tr>
<tr>
<td><em>Percentages:</em></td>
<td>N/A</td>
</tr>
<tr>
<td><em>Media:</em></td>
<td>visual, continuous</td>
</tr>
<tr>
<td><em>Computed&nbsp;value:</em></td>
<td>&lsquo;<code class="css" title="auto!!orientation">auto</code>&rsquo;,
&lsquo;<code class="css">portrait</code>&rsquo;, or
&lsquo;<code class="css">landscape</code>&rsquo; as specified.</td>
</tr>
</tbody>
</table>
<p>This descriptor is used to request that a document is displayed in portrait
or landscape mode. For a UA/device where the orientation is changed upon
tilting the device, an author can use this descriptor to inhibit the
orientation change. The descriptor should be respected for
standalone web applications, and when the document is displayed
in fullscreen. It is recommended that it is ignored for normal
web navigation to avoid confusing the user.</p>
<p>Values have the following meanings:</p>
<dl>
<dt>&lsquo;<code class="css"><dfn title="auto!!orientation">auto</dfn></code>&rsquo;</dt>
<dd>The UA automatically chooses the orientation based on the device's
normal mode of operation. The UA may choose to change the orientation
of the presentation when the device is tilted.</dd>
<dt>&lsquo;<code class="css"><dfn>portrait</dfn></code>&rsquo;</dt>
<dd>The document should be locked to portrait presentation.</dd>
<dt>&lsquo;<code class="css"><dfn>landscape</dfn></code>&rsquo;</dt>
<dd>The document should be locked to landscape presentation.</dd>
</dl>
<h2>Constraining viewport descriptor values</h2>
<h3>Definitions</h3>
<p>For the procedure below:</p>
<p>Descriptors refer to the values resolved/constrained to at that point in
the procedure. They are initially resolved to their computed values.
</p>
<p><code class="index" title="width!!resolved">width</code> and
<code class="index" title="height!!resolved">height</code> refer to the
resolved viewport size and not the shorthand descriptors. They are both
initially &lsquo;<code class="css" title="auto!!length">auto</code>&rsquo;.
</p>
<p>
<code>MIN/MAX</code> computations where one of the arguments is
&lsquo;<code class="css">auto</code>&rsquo; resolve to the other argument.
For instance, <code>MIN(0.25, 'auto') = 0.25</code>, and
<code>MAX(5, 'auto') = 5</code>.
</p>
<p>
<code class="index" title="width!!initial">initial-width</code> is the
width of the <span>initial viewport</span> in pixels at zoom factor 1.0.
</p>
<p>
<code class="index" title="height!!initial">initial-height</code> is the
height of the <span>initial viewport</span> in pixels at zoom factor 1.0.
</p>
<h3 id="constraining-procedure">The procedure</h3>
<p>The used values are resolved from the computed values going
through the steps below.</p>
<p>User agents are expected, but not required, to re-run this procedure and
re-layout the document, if necessary, in response to changes in the user
environment, for example if the device is tilted from landscape to
portrait mode or the window that forms the
<span>initial viewport</span> is resized.</p>
<p>However, Media Queries and Device Adaption are <dfn title="Specifications
whose evaluations are both affected by the same changes to the user
environment, and so always must be evaluated together in order to ensure
proper rendering.">tethered specifications</dfn>. As a result, UAs that also
support <a href="http://www.w3.org/TR/css3-mediaqueries/">Media Queries</a>
must re-run this procedure and re-layout the document in all cases where
changes in the user environment would cause them to re-evaluate Media
Queries.</p>
<h4 class="no-num no-toc">Resolve <code title="min-zoom!!resolved">min-zoom</code>
and <code title="max-zoom!!resolved">max-zoom</code> values</h4>
<ol>
<li>If <code title="min-zoom!!resolved">min-zoom</code> is not
&lsquo;<code class="css" title="auto!!min-zoom">auto</code>&rsquo; and
<code title="max-zoom!!resolved">max-zoom</code> is not
&lsquo;<code class="css" title="auto!!max-zoom">auto</code>&rsquo;,
set <code>max-zoom = MAX(min-zoom, max-zoom)</code></li>
</ol>
<h4 class="no-num no-toc">Constrain <code title="zoom!!resolved">zoom</code>
value to the <code>[min-zoom, max-zoom]</code> range</h4>
<ol id="ol2">
<li>If <code title="zoom!!resolved">zoom</code> is not
&lsquo;<code class="css" title="auto!!zoom">auto</code>&rsquo;,
set <code>zoom = MAX(min-zoom, MIN(max-zoom, zoom))</code></li>
</ol>
<h4 id="resolve-px" class="no-num no-toc">Resolve non-&lsquo;<code class="css" title="auto!!length">auto</code>&rsquo; lengths to pixel lengths</h4>
<ol id="ol3">
<li>Resolve absolute lengths and percentages to pixel values for the
&lsquo;<code class="descriptor">min-width</code>&rsquo;,
&lsquo;<code class="descriptor">max-width</code>&rsquo;,
&lsquo;<code class="descriptor">min-height</code>&rsquo;, and
&lsquo;<code class="descriptor">max-height</code>&rsquo;
descriptors.
</li>
</ol>
<h4 class="no-num no-toc">Resolve initial <code title="width!!resolved">width</code> and
<code title="height!!resolved">height</code> from min/max descriptors</h4>
<ol id="ol4">
<li>If <code title="min-width!!resolved">min-width</code> or
<code title="max-width!!resolved">max-width</code> is not
&lsquo;<code class="css" title="auto!!length">auto</code>&rsquo;, set
<code>width = MAX(min-width, MIN(max-width, initial-width))</code></li>
<li>If <code title="min-height!!resolved">min-height</code> or
<code title="max-height!!resolved">max-height</code> is not
&lsquo;<code class="css" title="auto!!length">auto</code>&rsquo;, set
<code>height = MAX(min-height, MIN(max-height, initial-height))</code></li>
</ol>
<h4 class="no-num no-toc">Resolve <code title="width!!resolved">width</code>
value</h4>
<ol id="ol6">
<li>If <code title="width!!resolved">width</code> and
<code title="height!!resolved">height</code> are both
&lsquo;<code class="css">auto</code>&rsquo;, set <code>width =
initial-width</code></li>
<li>If <code title="width!!resolved">width</code> is
&lsquo;<code class="css">auto</code>&rsquo;, set <code>width = height *
(initial-width / initial-height)</code>, or <code>width = initial-width</code>
if <code class="index" title="height!!initial">initial-height</code> is 0.</li>
</ol>
<h4 class="no-num no-toc">Resolve <code title="height!!resolved">height</code>
value</h4>
<ol id="ol8">
<li>If <code title="height!!resolved">height</code> is
&lsquo;<code class="css">auto</code>&rsquo;, set <code>height = width *
(initial-height / initial-width)</code>, or <code>height = initial-height</code>
if <code class="index" title="width!!initial">initial-width</code> is 0.</li>
</ol>
<h2>Media Queries</h2>
<p>For several media features, the size of the initial containing block and
the orientation of the device affects the result of a media query
evaluation, which means that the effect of
<code class="css">@viewport</code> rules on media queries needs extra
attention.</p>
<p>From the Media Queries specification [[!MEDIAQ]]:</p>
<blockquote><p>&ldquo;To avoid circular dependencies, it is never necessary
to apply the style sheet in order to evaluate expressions. For example,
the aspect ratio of a printed document may be influenced by a style sheet,
but expressions involving &lsquo;device-aspect-ratio&rsquo; will be based
on the default aspect ratio of the user agent.&rdquo;</p></blockquote>
<p>The UA must however cascade <code class="css">@viewport</code> rules
separately with the <span>initial viewport</span> size used for
evaluating media feature expressions and other values that depend on the
viewport size to avoid circular dependencies, but use the actual viewport
size when cascading all other rules.</p>
<p>Procedure for applying CSS rules:</p>
<ol>
View remainder of file in raw view