You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2419 lines
82 KiB
2419 lines
82 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
|
|
<html lang=en>
|
|
<head><meta content="text/html;charset=utf-8" http-equiv=Content-Type>
|
|
|
|
<title>CSS Device Adaptation</title>
|
|
<link href=default.css rel=stylesheet type="text/css">
|
|
<link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel=stylesheet
|
|
type="text/css">
|
|
|
|
<body class=draft>
|
|
<div class=head> <!--begin-logo-->
|
|
<p><a href="http://www.w3.org/"><img alt=W3C height=48
|
|
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
|
|
|
|
<h1>CSS Device Adaptation</h1>
|
|
|
|
<h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 15
|
|
September 2011</h2>
|
|
|
|
<dl>
|
|
<dt>This version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2011/WD-css-device-adapt-20110915/">http://www.w3.org/TR/2011/WD-css-device-adapt-20110915/</a>
|
|
|
|
<dt>Latest version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/css-device-adapt/">http://www.w3.org/TR/css-device-adapt/</a>
|
|
|
|
<dt>Previous version:
|
|
|
|
<dd>None
|
|
|
|
<dt>Editor:
|
|
|
|
<dd><a href="mailto:rune@opera.com">Rune Lillesveen</a> (<a
|
|
href="http://www.opera.com/">Opera Software</a>)
|
|
</dl>
|
|
<!--begin-copyright-->
|
|
<p class=copyright><a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
|
|
rel=license>Copyright</a> © 2011 <a
|
|
href="http://www.w3.org/"><acronym title="World Wide Web
|
|
Consortium">W3C</acronym></a><sup>®</sup> (<a
|
|
href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
|
|
of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym
|
|
title="European Research Consortium for Informatics and
|
|
Mathematics">ERCIM</acronym></a>, <a
|
|
href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
|
|
<a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
|
|
and <a
|
|
href="http://www.w3.org/Consortium/Legal/copyright-documents">document
|
|
use</a> rules apply.</p>
|
|
<!--end-copyright-->
|
|
<hr title="Separator for header">
|
|
</div>
|
|
|
|
<h2 class="no-num no-toc" id=abstract>Abstract</h2>
|
|
|
|
<p>This specification provides a way for an author to specify, in CSS, the
|
|
size, zoom factor, and orientation of the viewport that is used as the
|
|
base for the initial containing block.
|
|
|
|
<h2 class="no-num no-toc" id=status-of-this-document>Status of this
|
|
document</h2>
|
|
<!--begin-status-->
|
|
|
|
<p><em>This section describes the status of this document at the time of
|
|
its publication. Other documents may supersede this document. A list of
|
|
current W3C publications and the latest revision of this technical report
|
|
can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
|
|
index at http://www.w3.org/TR/.</a></em>
|
|
|
|
<p>Publication as a Working Draft does not imply endorsement by the W3C
|
|
Membership. This is a draft document and may be updated, replaced or
|
|
obsoleted by other documents at any time. It is inappropriate to cite this
|
|
document as other than work in progress.
|
|
|
|
<p>The (<a
|
|
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
|
|
mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
|
|
<a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
|
|
for discussion of this specification. When sending e-mail, please put the
|
|
text “css-device-adapt” in the subject, preferably like this:
|
|
“[<!---->css-device-adapt<!---->] <em>…summary of
|
|
comment…</em>”
|
|
|
|
<p>This document was produced by the <a
|
|
href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
|
|
the <a href="http://www.w3.org/Style/">Style Activity</a>).
|
|
|
|
<p>This document was produced by a group operating under the <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
|
|
2004 W3C Patent Policy</a>. W3C maintains a <a
|
|
href="http://www.w3.org/2004/01/pp-impl/32061/status"
|
|
rel=disclosure>public list of any patent disclosures</a> made in
|
|
connection with the deliverables of the group; that page also includes
|
|
instructions for disclosing a patent. An individual who has actual
|
|
knowledge of a patent which the individual believes contains <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
|
|
Claim(s)</a> must disclose the information in accordance with <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
|
|
6 of the W3C Patent Policy</a>.</p>
|
|
<!--end-status-->
|
|
|
|
<p>This is the first public Working Draft of the CSS Device Adaptation
|
|
Module.
|
|
|
|
<h2 class="no-num no-toc" id=table-of-contents>Table of Contents</h2>
|
|
<!--begin-toc-->
|
|
|
|
<ul class=toc>
|
|
<li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
|
|
|
|
<li><a href="#values"><span class=secno>2. </span>Values</a>
|
|
|
|
<li><a href="#the-viewport"><span class=secno>3. </span>The viewport</a>
|
|
|
|
<li><a href="#the-viewport-rule"><span class=secno>4. </span>The <code
|
|
class=css>@viewport</code> rule</a>
|
|
<ul class=toc>
|
|
<li><a href="#syntax"><span class=secno>4.1. </span>Syntax</a>
|
|
</ul>
|
|
|
|
<li><a href="#viewport-properties"><span class=secno>5. </span>Viewport
|
|
properties</a>
|
|
<ul class=toc>
|
|
<li><a href="#the-lsquomin-widthrsquo-and-lsquomax-wid"><span
|
|
class=secno>5.1. </span>The ‘<code
|
|
class=property>min-width</code>’ and ‘<code
|
|
class=property>max-width</code>’ properties</a>
|
|
|
|
<li><a href="#the-lsquowidthrsquo-shorthand-property"><span
|
|
class=secno>5.2. </span>The ‘<code
|
|
class=property>width</code>’ shorthand property</a>
|
|
|
|
<li><a href="#the-lsquomin-heightrsquo-and-lsquomax-he"><span
|
|
class=secno>5.3. </span>The ‘<code
|
|
class=property>min-height</code>’ and ‘<code
|
|
class=property>max-height</code>’ properties</a>
|
|
|
|
<li><a href="#the-lsquoheightrsquo-shorthand-property"><span
|
|
class=secno>5.4. </span>The ‘<code
|
|
class=property>height</code>’ shorthand property</a>
|
|
|
|
<li><a href="#the-lsquozoomrsquo-property"><span class=secno>5.5.
|
|
</span>The ‘<code class=property
|
|
title="zoom!!property">zoom</code>’ property</a>
|
|
|
|
<li><a href="#the-lsquomin-zoomrsquo-property"><span class=secno>5.6.
|
|
</span>The ‘<code class=property>min-zoom</code>’
|
|
property</a>
|
|
|
|
<li><a href="#the-lsquomax-zoomrsquo-property"><span class=secno>5.7.
|
|
</span>The ‘<code class=property>max-zoom</code>’
|
|
property</a>
|
|
|
|
<li><a href="#the-lsquouser-zoomrsquo-property"><span class=secno>5.8.
|
|
</span>The ‘<code class=property>user-zoom</code>’
|
|
property</a>
|
|
|
|
<li><a href="#the-lsquoorientationrsquo-property"><span class=secno>5.9.
|
|
</span>The ‘<code class=property>orientation</code>’
|
|
property</a>
|
|
|
|
<li><a href="#the-lsquoresolutionrsquo-property"><span class=secno>5.10.
|
|
</span>The ‘<code class=property>resolution</code>’
|
|
property</a>
|
|
</ul>
|
|
|
|
<li><a href="#constraining-viewport-property-values"><span class=secno>6.
|
|
</span>Constraining viewport property values</a>
|
|
<ul class=toc>
|
|
<li><a href="#definitions"><span class=secno>6.1. </span>Definitions</a>
|
|
|
|
|
|
<li><a href="#constraining-procedure"><span class=secno>6.2. </span>The
|
|
procedure</a>
|
|
</ul>
|
|
|
|
<li><a href="#media-queries"><span class=secno>7. </span>Media Queries</a>
|
|
|
|
|
|
<li><a href="#cssom"><span class=secno>8. </span>CSSOM</a>
|
|
|
|
<li><a href="#conformance"><span class=secno>9. </span>Conformance</a>
|
|
|
|
<li><a href="#viewport-meta-element"><span class=secno>10. </span>Viewport
|
|
<code class=html>META</code> element</a>
|
|
<ul class=toc>
|
|
<li><a href="#ua-stylesheet"><span class=secno>10.1. </span>UA
|
|
stylesheet</a>
|
|
|
|
<li><a href="#meta-properties"><span class=secno>10.2.
|
|
</span>Properties</a>
|
|
|
|
<li><a href="#parsing-algorithm"><span class=secno>10.3. </span>Parsing
|
|
algorithm</a>
|
|
|
|
<li><a href="#translation-into-viewport-properties"><span
|
|
class=secno>10.4. </span>Translation into <code
|
|
class=css>@viewport</code> properties</a>
|
|
</ul>
|
|
|
|
<li><a href="#handling-auto-zoom"><span class=secno>11. </span>Handling
|
|
‘<code class=css title="auto!!zoom">auto</code>’ for
|
|
‘<code class=property title="zoom!!property">zoom</code>’</a>
|
|
|
|
|
|
<li class=no-num><a href="#acknowledgments">Acknowledgments</a>
|
|
|
|
<li class=no-num><a href="#references">References</a>
|
|
<ul class=toc>
|
|
<li class=no-num><a href="#normative-references">Normative
|
|
references</a>
|
|
|
|
<li class=no-num><a href="#other-references">Other references</a>
|
|
</ul>
|
|
|
|
<li class=no-num><a href="#property-index">Property index</a>
|
|
|
|
<li class=no-num><a href="#index">Index</a>
|
|
</ul>
|
|
<!--end-toc-->
|
|
|
|
<h2 id=introduction><span class=secno>1. </span>Introduction</h2>
|
|
|
|
<p><em>This section is not normative.</em>
|
|
|
|
<p>CSS 2.1 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
specifies an <a
|
|
href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">
|
|
initial containing block</a> for continuous media that has the dimensions
|
|
of the <a href="http://www.w3.org/TR/CSS21/visuren.html#viewport">
|
|
viewport</a>. Mobile/handheld device browsers have a viewport that is
|
|
generally a lot narrower than a desktop browser window at a zoom level
|
|
that gives a CSS pixel size <a
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#length-units">recommended
|
|
</a> by CSS 2.1.
|
|
|
|
<p>The narrow viewport is a problem for documents designed to look good in
|
|
desktop browsers. The result is that mobile browser vendors use a fixed
|
|
initial containing block size that is different from the viewport size,
|
|
and close to that of a typical desktop browser window. In addition to
|
|
scrolling or panning, zooming is often used to change between an overview
|
|
of the document and zoom in on particular areas of the document to read
|
|
and interact with.
|
|
|
|
<p>Certain DOCTYPEs (for instance XHTML Mobile Profile) are used to
|
|
recognize mobile documents which are assumed to be designed for handheld
|
|
devices, hence using the viewport size as the initial containing block
|
|
size.
|
|
|
|
<p>Additionally, an HTML <code class=html>META</code> tag has been
|
|
introduced for allowing an author to specify the size of the initial
|
|
containing block, and the initial zoom factor directly. It was first
|
|
implemented by Apple for the Safari/iPhone browser, but has since been
|
|
implemented for the Opera, Android, and Fennec browsers. These
|
|
implementations are not fully interoperable and this specification is an
|
|
attempt at standardizing the functionality provided by the viewport <code
|
|
class=html>META</code> tag in CSS.
|
|
|
|
<h2 id=values><span class=secno>2. </span>Values</h2>
|
|
|
|
<p>This specification follows the <a
|
|
href="http://www.w3.org/TR/css3-syntax/#property-defs">CSS property
|
|
definition conventions</a> from <a href="#CSS3SYN"
|
|
rel=biblioentry>[CSS3SYN]<!--{{!CSS3SYN}}--></a>.
|
|
|
|
<p>Value types are defined in <a href="#CSS3VAL"
|
|
rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>.
|
|
|
|
<h2 id=the-viewport><span class=secno>3. </span>The viewport</h2>
|
|
|
|
<p>This specification introduces a way of overriding the size of the
|
|
viewport provided by the user agent (UA). Because of this, we need to
|
|
introduce the difference between the <a href="#initial-viewport">initial
|
|
viewport</a> and the <a href="#actual-viewport">actual viewport</a>.
|
|
|
|
<dl>
|
|
<dt><dfn id=initial-viewport>initial viewport</dfn>
|
|
|
|
<dd>This refers to the viewport before any UA or author styles have
|
|
overridden the viewport given by the window or viewing area of the UA.
|
|
Note that the initial viewport size will change with the size of the
|
|
window or viewing area.
|
|
|
|
<dt><dfn id=actual-viewport>actual viewport</dfn>
|
|
|
|
<dd>This is the viewport you get after the cascaded viewport properties,
|
|
and the following <a href="#constraining-procedure">constraining
|
|
procedure</a> have been applied.
|
|
</dl>
|
|
|
|
<p>When the <a href="#actual-viewport">actual viewport</a> cannot fit
|
|
inside the window or viewing area, either because the <a
|
|
href="#actual-viewport">actual viewport</a> is larger than the <a
|
|
href="#initial-viewport">initial viewport</a> or the zoom factor causes
|
|
only parts of the <a href="#actual-viewport">actual viewport</a> to be
|
|
visible, the UA should offer a scrolling or panning mechanism.
|
|
|
|
<p>It is recommended that initially the upper-left corners of the <a
|
|
href="#actual-viewport"> actual viewport</a> and the window or viewing
|
|
area are aligned if the base direction of the document is ltr. Similarly,
|
|
that the upper-right corners are aligned when the base direction is rtl.
|
|
The base direction for a document is defined as the computed value of the
|
|
<code class=property>direction</code> property for the first <code
|
|
class=html>BODY</code> element of an HTML or XHTML document. For other
|
|
document types, it is the computed <code class=property>direction</code>
|
|
for the root element.
|
|
|
|
<p class=issue>"dbaron: The question is, what does this do on the desktop
|
|
browser? (And what's a desktop browser)". Need to say that a "desktop"
|
|
browser typically have no UA styles, as opposed to the <a
|
|
href="#ua-stylesheet">UA stylesheet</a> outlined for current mobile
|
|
behaviour, and that no UA styles for @viewport will give "desktop"
|
|
behaviour per default (actual viewport is initial viewport).
|
|
|
|
<h2 id=the-viewport-rule><span class=secno>4. </span>The <code
|
|
class=css>@viewport</code> rule</h2>
|
|
|
|
<p>The <code class=css>@viewport</code> <a
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#at-rules">at-rule</a>
|
|
consists of the @-keyword followed by a block of property declarations
|
|
describing the viewport.
|
|
|
|
<p>The property declarations inside an <code class=css>@viewport</code>
|
|
rule are per document properties and there is no inheritance involved.
|
|
Hence declarations using the ‘<code class=css>inherit</code>’
|
|
keyword will be dropped. They work similar to <code class=css>@page</code>
|
|
properties and follow the cascading order of CSS. Hence, properties in
|
|
<code class=css>@viewport</code> rules will override properties from
|
|
preceding rules. The declarations allow !important which will affect
|
|
cascading of properties accordingly.
|
|
|
|
<p class=issue>Should the @viewport rule apply to top-level documents only?
|
|
If not, we need to say something about different zoom factors in frames.
|
|
|
|
<p class=issue>Bert: What's interactions of @viewport and @page
|
|
|
|
<div class=example>
|
|
<p>This example sets the viewport to fit the width of the device. Note
|
|
that it is enough to set the width as the height will be resolved from
|
|
the width.</p>
|
|
|
|
<pre><!--
|
|
-->@viewport {
|
|
<!-- --> width: device-width;
|
|
<!-- -->}<!--
|
|
--></pre>
|
|
</div>
|
|
|
|
<h3 id=syntax><span class=secno>4.1. </span>Syntax</h3>
|
|
|
|
<p>The syntax for the <code class=css>@viewport</code> rule is as follows
|
|
(using the notation from the <a
|
|
href="http://www.w3.org/TR/CSS21/grammar.html">Grammar appendix</a> of CSS
|
|
2.1 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>):
|
|
|
|
<pre><!--
|
|
-->viewport
|
|
<!----> : VIEWPORT_SYM S*
|
|
<!----> '{' S* declaration? [ ';' S* declaration? ]* '}' S*<!--
|
|
-->;</pre>
|
|
|
|
<p>with the new token:
|
|
|
|
<pre>@{V}{I}{E}{W}{P}{O}{R}{T} {return VIEWPORT_SYM;}</pre>
|
|
|
|
<p> where:
|
|
|
|
<pre>V v|\\0{0,4}(56|76)(\r\n|[ \t\r\n\f])?|\\v
|
|
<!-- -->W w|\\0{0,4}(57|77)(\r\n|[ \t\r\n\f])?|\\w</pre>
|
|
|
|
<p>The <code>viewport</code> non-terminal is added to the
|
|
<code>stylesheet</code> production along with the <code>ruleset</code>,
|
|
<code>media</code>, and <code>page</code> non-terminals:
|
|
|
|
<pre><!--
|
|
-->stylesheet
|
|
<!-- --> : [ CHARSET_SYM STRING ';' ]?
|
|
<!-- --> [S|CDO|CDC]* [ import [ CDO S* | CDC S* ]* ]*
|
|
<!-- --> [ [ ruleset | media | page | viewport ] [ CDO S* | CDC S* ]* ]*
|
|
<!-- --> ;<!--
|
|
--></pre>
|
|
|
|
<p>It is also added to media production to allow <code
|
|
class=css>@viewport</code> rules nested inside <code
|
|
class=css>@media</code> rules <span class=note>This is extending the CSS
|
|
2.1 syntax. A draft of CSS3 Paged Media also allows page inside
|
|
@media.</span>:
|
|
|
|
<pre><!--
|
|
-->media
|
|
<!-- --> : MEDIA_SYM S* media_list LBRACE S* [ ruleset | viewport ]* '}' S*
|
|
<!-- --> ;<!--
|
|
--></pre>
|
|
|
|
<h2 id=viewport-properties><span class=secno>5. </span>Viewport properties</h2>
|
|
|
|
<p>This section presents the properties that are allowed inside an <code
|
|
class=css>@viewport</code> rule. Other properties than those listed here
|
|
will be dropped.
|
|
|
|
<p>Relative length values are resolved against initial values. For instance
|
|
‘<code class=property>em</code>’s are resolved against the
|
|
initial value of the font-size property.
|
|
|
|
<h3 id=the-lsquomin-widthrsquo-and-lsquomax-wid><span class=secno>5.1.
|
|
</span>The ‘<a href="#min-width"><code
|
|
class=property>min-width</code></a>’ and ‘<a
|
|
href="#max-width"><code class=property>max-width</code></a>’
|
|
properties</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=min-width>min-width</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td><a href="#ltviewport-lengthgt"><viewport-length></a>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td><a href="#auto" title="auto!!length">auto</a>
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>Refer to the width of the <a href="#initial-viewport">initial
|
|
viewport</a>
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual, continuous
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>‘<a href="#auto"><code class=css
|
|
title="auto!!length">auto</code></a>’, ‘<a
|
|
href="#device-width"><code class=css>device-width</code></a>’,
|
|
‘<a href="#device-height"><code
|
|
class=css>device-height</code></a>’, an absolute length, or a
|
|
percentage as specified
|
|
</table>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=max-width>max-width</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td><a href="#ltviewport-lengthgt"><viewport-length></a>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td><a href="#auto" title="auto!!length">auto</a>
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>Refer to the width of the <a href="#initial-viewport">initial
|
|
viewport</a>
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual, continuous
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>‘<a href="#auto"><code class=css
|
|
title="auto!!length">auto</code></a>’, ‘<a
|
|
href="#device-width"><code class=css>device-width</code></a>’,
|
|
‘<a href="#device-height"><code
|
|
class=css>device-height</code></a>’, an absolute length, or a
|
|
percentage as specified
|
|
</table>
|
|
|
|
<p>Specifies the minimum and maximum width of the <a
|
|
href="http://www.w3.org/TR/CSS21/visuren.html#viewport">viewport</a> that
|
|
is used to set the size of the <a
|
|
href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">
|
|
initial containing block</a> where
|
|
|
|
<p style="margin: 1em"><var><dfn
|
|
id=ltviewport-lengthgt><viewport-length></dfn></var> = auto |
|
|
device-width | device-height | <var><length></var> |
|
|
<var><percentage></var>
|
|
|
|
<p>and the values have the following meanings:
|
|
|
|
<dl>
|
|
<dt>‘<code class=css><dfn id=auto
|
|
title="auto!!length">auto</dfn></code>’
|
|
|
|
<dd>The used value is calculated from the other property values according
|
|
to the <a href="#constraining-procedure">constraining procedure</a>.
|
|
|
|
<dt>‘<code class=css><dfn
|
|
id=device-width>device-width</dfn></code>’
|
|
|
|
<dd>The width of the screen in CSS pixels at zoom factor 1.0.
|
|
|
|
<dt>‘<code class=css><dfn
|
|
id=device-height>device-height</dfn></code>’
|
|
|
|
<dd>The height of the screen in CSS pixels at zoom factor 1.0.
|
|
|
|
<dt><var><length></var>
|
|
|
|
<dd>
|
|
<p>A positive absolute or relative length.</p>
|
|
|
|
<dt><var><percentage></var>
|
|
|
|
<dd>
|
|
<p>A percentage value relative to the width or height of the <a
|
|
href="#initial-viewport">initial viewport</a> at zoom factor 1.0, for
|
|
horizontal and vertical lengths respectively. Must be positive.</p>
|
|
</dl>
|
|
|
|
<p>The min-width and max-width properties are inputs to the <a
|
|
href="#constraining-procedure">constraining procedure</a>. The width will
|
|
initially be set as close as possible to the <a
|
|
href="#initial-viewport">initial viewport</a> width within the min/max
|
|
constraints.
|
|
|
|
<h3 id=the-lsquowidthrsquo-shorthand-property><span class=secno>5.2.
|
|
</span>The ‘<a href="#width"><code
|
|
class=property>width</code></a>’ shorthand property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=width>width</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td><a href="#ltviewport-lengthgt"><viewport-length></a>{1,2}
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>See individual properties
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>See individual properties
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual, continuous
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>See individual properties
|
|
</table>
|
|
|
|
<p>This is a shorthand property for setting both min-width and max-width.
|
|
One <a href="#ltviewport-lengthgt"><viewport-length></a> value will
|
|
set both min-width and max-width to that value. Two <a
|
|
href="#ltviewport-lengthgt"><viewport-length></a> values will set
|
|
min-width to the first and max-width to the second.
|
|
|
|
<h3 id=the-lsquomin-heightrsquo-and-lsquomax-he><span class=secno>5.3.
|
|
</span>The ‘<a href="#min-height"><code
|
|
class=property>min-height</code></a>’ and ‘<a
|
|
href="#max-height"><code class=property>max-height</code></a>’
|
|
properties</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=min-height>min-height</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td><a href="#ltviewport-lengthgt"><viewport-length></a>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td><a href="#auto" title="auto!!length">auto</a>
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>Refer to the height of the <a href="#initial-viewport">initial
|
|
viewport</a>
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual, continuous
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>‘<a href="#auto"><code class=css
|
|
title="auto!!length">auto</code></a>’, ‘<a
|
|
href="#device-width"><code class=css>device-width</code></a>’,
|
|
‘<a href="#device-height"><code
|
|
class=css>device-height</code></a>’, an absolute length, or a
|
|
percentage as specified
|
|
</table>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=max-height>max-height</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td><a href="#ltviewport-lengthgt"><viewport-length></a>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td><a href="#auto" title="auto!!length">auto</a>
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>Refer to the height of the <a href="#initial-viewport">initial
|
|
viewport</a>
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual, continuous
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>‘<a href="#auto"><code class=css
|
|
title="auto!!length">auto</code></a>’, ‘<a
|
|
href="#device-width"><code class=css>device-width</code></a>’,
|
|
‘<a href="#device-height"><code
|
|
class=css>device-height</code></a>’, an absolute length, or a
|
|
percentage as specified
|
|
</table>
|
|
|
|
<p>Specifies the minimum and maximum height of the <a
|
|
href="http://www.w3.org/TR/CSS21/visuren.html#viewport">viewport</a> that
|
|
is used to set the size of the <a
|
|
href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">
|
|
initial containing block</a>.
|
|
|
|
<p>The min-height and max-height properties are inputs to the <a
|
|
href="#constraining-procedure">constraining procedure</a>. The height will
|
|
initially be set as close as possible to the <a
|
|
href="#initial-viewport">initial viewport</a> height within the min/max
|
|
constraints.
|
|
|
|
<h3 id=the-lsquoheightrsquo-shorthand-property><span class=secno>5.4.
|
|
</span>The ‘<a href="#height"><code
|
|
class=property>height</code></a>’ shorthand property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=height>height</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td><a href="#ltviewport-lengthgt"><viewport-length></a>{1,2}
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>See individual properties
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>See individual properties
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual, continuous
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>See individual properties
|
|
</table>
|
|
|
|
<p>This is a shorthand property for setting both min-height and max-height.
|
|
One <a href="#ltviewport-lengthgt"><viewport-length></a> value will
|
|
set both min-height and max-height to that value. Two <a
|
|
href="#ltviewport-lengthgt"><viewport-length></a> values will set
|
|
min-height to the first and max-height to the second.
|
|
|
|
<h3 id=the-lsquozoomrsquo-property><span class=secno>5.5. </span>The
|
|
‘<a href="#zoom"><code class=property
|
|
title="zoom!!property">zoom</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=zoom title="zoom!!property">zoom</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>auto | <number> | <percentage>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td><a href="#auto0" title="auto!!zoom">auto</a>
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>The zoom factor itself
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual, continuous
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>‘<a href="#auto0"><code class=css
|
|
title="auto!!zoom">auto</code></a>’, or a positive number or
|
|
percentage as specified.
|
|
</table>
|
|
|
|
<p>Specifies the initial zoom factor for the window or viewing area. This
|
|
is a magnifying glass type of zoom. Interactively changing the zoom factor
|
|
from the initial zoom factor does not affect the size of the initial or
|
|
the actual viewport.
|
|
|
|
<p>Values have the following meanings: <span class=issue>Should both
|
|
numbers and percentages be
|
|
allowed?<!-- http://lists.w3.org/Archives/Public/www-style/2010Oct/0321.html --></span>
|
|
|
|
<dl>
|
|
<dt>‘<code class=css><dfn id=auto0
|
|
title="auto!!zoom">auto</dfn></code>’
|
|
|
|
<dd>The zoom factor is UA-dependent. The UA may use the size of the area
|
|
of the canvas on which the document is rendered to find that initial zoom
|
|
factor. See <a href="#handling-auto-zoom">this section</a> for a proposed
|
|
way of handling ‘<a href="#auto0"><code class=css
|
|
title="auto!!zoom">auto</code></a>’ values for ‘<a
|
|
href="#zoom"><code class=property
|
|
title="zoom!!property">zoom</code></a>’.
|
|
|
|
<dt><var><number></var>
|
|
|
|
<dd>
|
|
<p>A positive number used as a zoom factor. A factor of 1.0 means that no
|
|
zooming is done. Values larger than 1.0 gives a zoomed-in effect and
|
|
values smaller than 1.0 a zoomed-out effect.</p>
|
|
|
|
<dt><var><percentage></var>
|
|
|
|
<dd>
|
|
<p>A positive percentage value used as a zoom factor. A factor of 100%
|
|
means that no zooming is done. Values larger than 100% gives a zoomed-in
|
|
effect and values smaller than 100% a zoomed-out effect.</p>
|
|
</dl>
|
|
|
|
<h3 id=the-lsquomin-zoomrsquo-property><span class=secno>5.6. </span>The
|
|
‘<a href="#min-zoom"><code class=property>min-zoom</code></a>’
|
|
property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=min-zoom>min-zoom</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>auto | <number> | <percentage>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td><a href="#auto1" title="auto!!min-zoom">auto</a>
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>The zoom factor itself
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual, continuous
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>‘<a href="#auto1"><code class=css
|
|
title="auto!!min-zoom">auto</code></a>’, or a positive number or
|
|
percentage as specified.
|
|
</table>
|
|
|
|
<p>Specifies the smallest allowed zoom factor. It is used as input to the
|
|
<a href="#constraining-procedure">constraining procedure</a> to constrain
|
|
non-‘<a href="#auto0"><code class=css
|
|
title="auto!!zoom">auto</code></a>’ ‘<a href="#zoom"><code
|
|
class=property title="zoom!!property">zoom</code></a>’ values, but
|
|
also to limit the allowed zoom factor that can be set through user
|
|
interaction. The UA should also use this value as a constraint when
|
|
choosing an actual zoom factor when the used value of ‘<a
|
|
href="#zoom"><code class=property
|
|
title="zoom!!property">zoom</code></a>’ is ‘<a
|
|
href="#auto0"><code class=css title="auto!!zoom">auto</code></a>’.
|
|
|
|
<p>Values have the following meanings:
|
|
|
|
<dl>
|
|
<dt>‘<code class=css><dfn id=auto1
|
|
title="auto!!min-zoom">auto</dfn></code>’
|
|
|
|
<dd>The lower limit on zoom factor is UA dependant. There will be no
|
|
minimum value constraint on the ‘<a href="#zoom"><code
|
|
class=property title="zoom!!property">zoom</code></a>’ property
|
|
used in the <a href="#constraining-procedure">constraining procedure</a>
|
|
|
|
<dt><var><number></var>
|
|
|
|
<dd>
|
|
<p>A positive number limiting the minimum value of the zoom factor.</p>
|
|
|
|
<dt><var><percentage></var>
|
|
|
|
<dd>
|
|
<p>A positive percentage limiting the minimum value of the zoom factor.</p>
|
|
</dl>
|
|
|
|
<h3 id=the-lsquomax-zoomrsquo-property><span class=secno>5.7. </span>The
|
|
‘<a href="#max-zoom"><code class=property>max-zoom</code></a>’
|
|
property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=max-zoom>max-zoom</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>auto | <number> | <percentage>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td><a href="#auto2" title="auto!!max-zoom">auto</a>
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>The zoom factor itself
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual, continuous
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>‘<a href="#auto2"><code class=css
|
|
title="auto!!max-zoom">auto</code></a>’, or a positive number or
|
|
percentage as specified.
|
|
</table>
|
|
|
|
<p>Specifies the largest allowed zoom factor. It is used as input to the <a
|
|
href="#constraining-procedure">constraining procedure</a> to constrain
|
|
non-‘<a href="#auto0"><code class=css
|
|
title="auto!!zoom">auto</code></a>’ ‘<a href="#zoom"><code
|
|
class=property title="zoom!!property">zoom</code></a>’ values, but
|
|
also to limit the allowed zoom factor that can be set through user
|
|
interaction. The UA should also use this value as a constraint when
|
|
choosing an actual zoom factor when the used value of ‘<a
|
|
href="#zoom"><code class=property
|
|
title="zoom!!property">zoom</code></a>’ is ‘<a
|
|
href="#auto0"><code class=css title="auto!!zoom">auto</code></a>’.
|
|
|
|
<p>Values have the following meanings:
|
|
|
|
<dl>
|
|
<dt>‘<code class=css><dfn id=auto2
|
|
title="auto!!max-zoom">auto</dfn></code>’
|
|
|
|
<dd>The upper limit on zoom factor is UA dependant. There will be no
|
|
maximum value constraint on the ‘<code
|
|
class=property>zoom</code>’ property used in the <a
|
|
href="#constraining-procedure">constraining procedure</a>
|
|
|
|
<dt><var><number></var>
|
|
|
|
<dd>
|
|
<p>A positive number limiting the maximum value of the zoom factor.</p>
|
|
|
|
<dt><var><percentage></var>
|
|
|
|
<dd>
|
|
<p>A positive percentage limiting the maximum value of the zoom factor.</p>
|
|
</dl>
|
|
|
|
<h3 id=the-lsquouser-zoomrsquo-property><span class=secno>5.8. </span>The
|
|
‘<a href="#user-zoom"><code
|
|
class=property>user-zoom</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=user-zoom>user-zoom</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>zoom | fixed
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td><a href="#zoom0" title="zoom!!value">zoom</a>
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual, continuous
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>‘<a href="#zoom0"><code class=css
|
|
title="zoom!!value">zoom</code></a>’ or ‘<a
|
|
href="#fixed"><code class=css>fixed</code></a>’ as specified.
|
|
</table>
|
|
|
|
<p>Specifies if the zoom factor can be changed by user interaction or not.
|
|
|
|
<p>Values have the following meanings:
|
|
|
|
<dl>
|
|
<dt>‘<code class=css><dfn id=zoom0
|
|
title="zoom!!value">zoom</dfn></code>’
|
|
|
|
<dd>The user can interactively change the zoom factor.
|
|
|
|
<dt>‘<code class=css><dfn id=fixed>fixed</dfn></code>’
|
|
|
|
<dd>The user cannot interactively change the zoom factor.
|
|
</dl>
|
|
|
|
<h3 id=the-lsquoorientationrsquo-property><span class=secno>5.9. </span>The
|
|
‘<a href="#orientation"><code
|
|
class=property>orientation</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=orientation>orientation</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>auto | portrait | landscape
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td><a href="#auto3" title="auto!!orientation">auto</a>
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual, continuous
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>‘<a href="#auto3"><code class=css
|
|
title="auto!!orientation">auto</code></a>’, ‘<a
|
|
href="#portrait"><code class=css>portrait</code></a>’, or
|
|
‘<a href="#landscape"><code class=css>landscape</code></a>’
|
|
as specified.
|
|
</table>
|
|
|
|
<p>This property 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 property to
|
|
inhibit the orientation change.
|
|
|
|
<p>Values have the following meanings:
|
|
|
|
<dl>
|
|
<dt>‘<code class=css><dfn id=auto3
|
|
title="auto!!orientation">auto</dfn></code>’
|
|
|
|
<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.
|
|
|
|
<dt>‘<code class=css><dfn id=portrait>portrait</dfn></code>’
|
|
|
|
<dd>The document should be locked to portrait presentation.
|
|
|
|
<dt>‘<code class=css><dfn id=landscape>landscape</dfn></code>’
|
|
|
|
<dd>The document should be locked to landscape presentation.
|
|
</dl>
|
|
|
|
<h3 id=the-lsquoresolutionrsquo-property><span class=secno>5.10. </span>The
|
|
‘<a href="#resolution"><code
|
|
class=property>resolution</code></a>’ property</h3>
|
|
|
|
<p class=issue>This property is at risk.</p>
|
|
<!-- http://lists.w3.org/Archives/Public/www-style/2010Aug/0131.html -->
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=resolution>resolution</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>auto | device | <resolution>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td><a href="#auto4" title="auto!!resolution">auto</a>
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual, continuous
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>‘<a href="#auto4"><code class=css
|
|
title="auto!!resolution">auto</code></a>’, ‘<a
|
|
href="#device"><code class=css>device</code></a>’, or a
|
|
resolution value as specified.
|
|
</table>
|
|
|
|
<p>The UA relates the CSS pixel to the <a
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#x40">reference pixel</a> or
|
|
the physical <a
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#length-units">length
|
|
units</a> as described in CSS 2.1 <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. The resolution property can
|
|
be used to override the CSS pixel size chosen by the UA by setting a CSS
|
|
pixel resolution. In CSS, absolute length units are fixed in relation to
|
|
each other, hence, changing the CSS pixel resolution will for instance
|
|
change the physical length of a CSS cm.
|
|
|
|
<p>The relationship between a device pixel and a CSS pixel will depend on
|
|
the device resolution. Setting <code>resolution: 120dpi</code> on a 240dpi
|
|
device will give a 2:1 ratio between device and CSS pixels, while on a
|
|
120dpi device, the ratio will be 1:1. Likewise, the ‘<a
|
|
href="#device"><code class=css>device</code></a>’ value will always
|
|
keep a 1:1 ratio, but will give different CSS pixel resolution depending
|
|
on device resolution.
|
|
|
|
<p>Note that setting this property will affect the used lengths for
|
|
‘<a href="#device-width"><code
|
|
class=css>device-width</code></a>’, ‘<a
|
|
href="#device-height"><code class=css>device-height</code></a>’, and
|
|
the size of the <a href="#initial-viewport">initial viewport</a>.
|
|
|
|
<p>The <dfn id=ltresolutiongt><resolution></dfn> value is a positive
|
|
<number> immediately followed by a unit identifier (‘<code
|
|
class=css>dpi</code>’ or ‘<code class=css>dpcm</code>’).
|
|
|
|
<p>Values have the following meanings:
|
|
|
|
<dl>
|
|
<dt>‘<code class=css><dfn id=auto4
|
|
title="auto!!resolution">auto</dfn></code>’
|
|
|
|
<dd>Use the UAs CSS pixel resolution.
|
|
|
|
<dt>‘<code class=css><dfn id=device>device</dfn></code>’
|
|
|
|
<dd>Use device resolution as the CSS pixel resolution. That is, have a 1-1
|
|
relationship between a CSS and a device pixel.
|
|
|
|
<dt><a href="#ltresolutiongt"><var><resolution></var></a>
|
|
|
|
<dd>Set the CSS pixel resolution to a fixed dpi or dpcm value.
|
|
</dl>
|
|
|
|
<h2 id=constraining-viewport-property-values><span class=secno>6.
|
|
</span>Constraining viewport property values</h2>
|
|
|
|
<h3 id=definitions><span class=secno>6.1. </span>Definitions</h3>
|
|
|
|
<p>For the procedure below:
|
|
|
|
<p>Properties refer to the values resolved/constrained to at that point in
|
|
the procedure. They are initially resolved to their computed values.
|
|
|
|
<p><code class=index id=width0 title="width!!resolved">width</code> and
|
|
<code class=index id=height0 title="height!!resolved">height</code> refer
|
|
to the resolved viewport size and not the shorthand properties. They are
|
|
both initially ‘<a href="#auto"><code class=css
|
|
title="auto!!length">auto</code></a>’.
|
|
|
|
<p> <code>MIN/MAX</code> computations where one of the arguments is
|
|
‘<code class=css>auto</code>’ resolve to the other argument.
|
|
For instance, <code>MIN(0.25, 'auto') = 0.25</code>, and <code>MAX(5,
|
|
'auto') = 5</code>.
|
|
|
|
<p> <code class=index id=initial-width
|
|
title="width!!initial">initial-width</code> is the width of the <a
|
|
href="#initial-viewport">initial viewport</a> in pixels at zoom factor
|
|
1.0.
|
|
|
|
<p> <code class=index id=initial-height
|
|
title="height!!initial">initial-height</code> is the height of the <a
|
|
href="#initial-viewport">initial viewport</a> in pixels at zoom factor
|
|
1.0.
|
|
|
|
<h3 id=constraining-procedure><span class=secno>6.2. </span>The procedure</h3>
|
|
|
|
<p>The used values are resolved from the computed values going through the
|
|
steps below.
|
|
|
|
<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 <a
|
|
href="#initial-viewport">initial viewport</a> is resized.
|
|
|
|
<h4 class="no-num no-toc"
|
|
id=resolve-non-lsquoautorsquo-lengths-to-pi>Resolve non-‘<a
|
|
href="#auto"><code class=css title="auto!!length">auto</code></a>’
|
|
lengths to pixel lengths</h4>
|
|
|
|
<ol>
|
|
<li>Resolve relative and absolute lengths, percentages, and keywords
|
|
(‘<a href="#device-width"><code
|
|
class=css>device-width</code></a>’, ‘<a
|
|
href="#device-height"><code class=css>device-height</code></a>’) to
|
|
pixel values for the ‘<a href="#min-width"><code
|
|
class=property>min-width</code></a>’, ‘<a
|
|
href="#max-width"><code class=property>max-width</code></a>’,
|
|
‘<a href="#min-height"><code
|
|
class=property>min-height</code></a>’ and ‘<a
|
|
href="#max-height"><code class=property>max-height</code></a>’
|
|
properties
|
|
</ol>
|
|
|
|
<h4 class="no-num no-toc"
|
|
id=resolve-initial-width-and-height-from-mi>Resolve initial <code
|
|
title="width!!resolved">width</code> and <code
|
|
title="height!!resolved">height</code> from min/max properties</h4>
|
|
|
|
<ol id=ol2>
|
|
<li>If <code title="min-width!!resolved">min-width</code> or <code
|
|
title="max-width!!resolved">max-width</code> is not ‘<a
|
|
href="#auto"><code class=css title="auto!!length">auto</code></a>’,
|
|
set <code>width = MAX(min-width, MIN(max-width, initial-width))</code>
|
|
|
|
<li>If <code title="min-height!!resolved">min-height</code> or <code
|
|
title="max-height!!resolved">max-height</code> is not ‘<a
|
|
href="#auto"><code class=css title="auto!!length">auto</code></a>’,
|
|
set <code>height = MAX(min-height, MIN(max-height,
|
|
initial-height))</code>
|
|
</ol>
|
|
|
|
<h4 class="no-num no-toc" id=resolve-min-zoom-and-max-zoom-values>Resolve
|
|
<code title="min-zoom!!resolved">min-zoom</code> and <code
|
|
title="max-zoom!!resolved">max-zoom</code> values</h4>
|
|
|
|
<ol id=ol4>
|
|
<li>If <code title="min-zoom!!resolved">min-zoom</code> is not ‘<a
|
|
href="#auto1"><code class=css
|
|
title="auto!!min-zoom">auto</code></a>’ and <code
|
|
title="max-zoom!!resolved">max-zoom</code> is not ‘<a
|
|
href="#auto2"><code class=css
|
|
title="auto!!max-zoom">auto</code></a>’, set <code>max-zoom =
|
|
MAX(min-zoom, max-zoom)</code>
|
|
</ol>
|
|
|
|
<h4 class="no-num no-toc"
|
|
id=constrain-zoom-value-to-the-min-zoom-max>Constrain <code
|
|
title="zoom!!resolved">zoom</code> value to the <code>[min-zoom,
|
|
max-zoom]</code> range</h4>
|
|
|
|
<ol id=ol5>
|
|
<li>If <code title="zoom!!resolved">zoom</code> is not ‘<a
|
|
href="#auto0"><code class=css title="auto!!zoom">auto</code></a>’,
|
|
set <code>zoom = MAX(min-zoom, MIN(max-zoom, zoom))</code>
|
|
</ol>
|
|
|
|
<h4 class="no-num no-toc" id=resolve-width-value>Resolve <code
|
|
title="width!!resolved">width</code> value</h4>
|
|
|
|
<ol id=ol6>
|
|
<li>If <code title="width!!resolved">width</code> and <code
|
|
title="zoom!!resolved">zoom</code> are both ‘<code
|
|
class=css>auto</code>’, set <code>width = initial-width</code>
|
|
|
|
<li>If <code title="width!!resolved">width</code> is ‘<code
|
|
class=css>auto</code>’, and <code
|
|
title="height!!resolved">height</code> is ‘<code
|
|
class=css>auto</code>’, set <code>width = (initial-width /
|
|
zoom)</code>
|
|
|
|
<li>If <code title="width!!resolved">width</code> is ‘<code
|
|
class=css>auto</code>’, set <code>width = height * (initial-width /
|
|
initial-height)</code>
|
|
</ol>
|
|
|
|
<h4 class="no-num no-toc" id=resolve-height-value>Resolve <code
|
|
title="height!!resolved">height</code> value</h4>
|
|
|
|
<ol id=ol9>
|
|
<li>If <code title="height!!resolved">height</code> is ‘<code
|
|
class=css>auto</code>’, set <code>height = width * (initial-height
|
|
/ initial-width)</code>
|
|
</ol>
|
|
|
|
<h4 class="no-num no-toc"
|
|
id=extend-width-and-height-to-fill-the-wind>Extend <code
|
|
title="width!!resolved">width</code> and <code
|
|
title="height!!resolved">height</code> to fill the window/viewing area for
|
|
the specified <code title="zoom!!resolved">zoom</code></h4>
|
|
|
|
<ol id=ol10>
|
|
<li>If <code title="zoom!!resolved">zoom</code> or <code
|
|
title="max-zoom!!resolved">max-zoom</code> is not ‘<a
|
|
href="#auto0"><code class=css title="auto!!zoom">auto</code></a>’,
|
|
set <code>width = MAX(width, (initial-width / MIN(zoom,
|
|
max-zoom)))</code>
|
|
|
|
<li>If <code title="zoom!!resolved">zoom</code> or <code
|
|
title="max-zoom!!resolved">max-zoom</code> is not ‘<a
|
|
href="#auto0"><code class=css title="auto!!zoom">auto</code></a>’,
|
|
set <code>height = MAX(height, (initial-height / MIN(zoom,
|
|
max-zoom)))</code>
|
|
</ol>
|
|
|
|
<div class=example>
|
|
<p>This example shows the case where the used value for width is increased
|
|
to fit the window/viewing area for a specified zoom value. The used value
|
|
for width will be two times device-width in this case, assuming
|
|
device-width is the same as the <a href="#initial-viewport">initial
|
|
viewport</a> width.</p>
|
|
|
|
<pre><!--
|
|
-->@viewport {
|
|
<!-- --> width: device-width;
|
|
<!-- --> zoom: 0.5;
|
|
<!-- -->}<!--
|
|
--></pre>
|
|
</div>
|
|
|
|
<h2 id=media-queries><span class=secno>7. </span>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 class=issue>Bert: If you put @viewport, can you put @viewport in @media?
|
|
Say what it means?
|
|
|
|
<p>From the Media Queries specification <a href="#MEDIAQ"
|
|
rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a>:
|
|
|
|
<blockquote>
|
|
<p>“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 ‘device-aspect-ratio’ will be based on
|
|
the default aspect ratio of the user agent.”
|
|
</blockquote>
|
|
|
|
<p>For <code class=css>@viewport</code> rules, though, it is recommended
|
|
that they are applied before media queries for other rules are evaluated.
|
|
|
|
<p>Recommended procedure for applying CSS rules:
|
|
|
|
<ol>
|
|
<li>Apply <code class=css>@viewport</code> rules. If <code
|
|
class=css>@viewport</code> rules rely on media queries, use the viewport
|
|
properties of the <a href="#initial-viewport">initial viewport</a>.
|
|
|
|
<li>Apply style rules. If style rules rely on media queries, use the
|
|
viewport properties obtained from step 1 when evaluating the media
|
|
queries.
|
|
</ol>
|
|
|
|
<p class=note>The rationale for using the viewport properties obtained from
|
|
applying the <code class=css>@viewport</code> rules for evaluating media
|
|
queries for style rules, is that media queries should match the <a
|
|
href="#actual-viewport">actual viewport</a> that the document will be
|
|
layed out in and not the initial or the one specified in the UA
|
|
stylesheet. Consider the example below given that the UA stylesheet has a
|
|
viewport width of 980px, but a device-width and <a
|
|
href="#initial-viewport">initial viewport</a> width of 320px. The author
|
|
has made separate styles to make the document look good for initial
|
|
containing block widths above or below 400px. The <a
|
|
href="#actual-viewport">actual viewport</a> used will be 320px wide, and
|
|
in order to match the styles with the <a href="#actual-viewport">actual
|
|
viewport</a> width, the viewport resulting from applying the <code
|
|
class=css>@viewport</code> rules should be used to evaluate the media
|
|
queries.
|
|
|
|
<div class=example>
|
|
<p>Given a device-width of 320px and a UA stylesheet viewport width of
|
|
980px, the first media query will not match, but the second will.</p>
|
|
|
|
<pre><!--
|
|
-->@viewport {
|
|
<!-- --> width: device-width;
|
|
<!-- -->}
|
|
<!-- -->
|
|
<!-- -->@media screen and (min-width: 400px) {
|
|
<!-- --> div { color: red; }
|
|
<!-- -->}
|
|
<!-- -->
|
|
<!-- -->@media screen and (max-width: 400px) {
|
|
<!-- --> div { color: green; }
|
|
<!-- -->}<!--
|
|
--></pre>
|
|
</div>
|
|
|
|
<p>Another example:
|
|
|
|
<div class=example>
|
|
<p>The media query below should match because the <code
|
|
class=css>@viewport</code> rule is applied before the media query is
|
|
evaluated.</p>
|
|
|
|
<pre><!--
|
|
-->@media screen and (width: 397px) {
|
|
<!-- --> div { color: green; }
|
|
<!-- -->}
|
|
<!-- -->
|
|
<!-- -->@viewport {
|
|
<!-- --> width: 397px;
|
|
<!-- -->}<!--
|
|
--></pre>
|
|
</div>
|
|
|
|
<p>Below is an example where an <code class=css>@viewport</code> rule
|
|
relies on a media query affected by the viewport properties.
|
|
|
|
<div class=example>
|
|
<p>The green color should be applied to a div because the <a
|
|
href="#initial-viewport">initial viewport</a> width is used to evaluate
|
|
the media query for the second <code class=css>@viewport</code> rule, but
|
|
the <a href="#actual-viewport">actual viewport</a> is used for evaluating
|
|
the media query when applying style rules.</p>
|
|
|
|
<pre><!--
|
|
-->@viewport {
|
|
<!-- --> width: 397px;
|
|
<!-- -->}
|
|
<!-- -->
|
|
<!-- -->@media screen and (width: 397px) {
|
|
<!-- --> @viewport {
|
|
<!-- --> width: 500px;
|
|
<!-- --> }
|
|
<!-- -->}
|
|
<!-- -->
|
|
<!-- -->@media screen and (width: 397px) {
|
|
<!-- --> div { color: green; }
|
|
<!-- -->}<!--
|
|
--></pre>
|
|
</div>
|
|
|
|
<p>It is recommended that authors do not write <code
|
|
class=css>@viewport</code> rules that rely on media queries whose
|
|
evaluation is affected by viewport properties. Is is also recommended that
|
|
the <code class=css>@viewport</code> rule(s) is placed as early in the
|
|
document as possible to avoid unnecessary re-evaluation of media queries
|
|
or reflows.
|
|
|
|
<p>The next example illustrates possible circular dependencies between
|
|
media queries and <code class=css>@viewport</code> rules. Assuming a UA
|
|
stylesheet viewport width larger than 200px, the first viewport rule would
|
|
apply causing an <a href="#actual-viewport">actual viewport</a> width of
|
|
100px. If the media queries were based on the <a
|
|
href="#actual-viewport">actual viewport</a>, a re-evaluation would apply
|
|
the second <code class=css>@viewport</code> rule which would in turn cause
|
|
the first media query to be true, which means we're back to start.
|
|
|
|
<div class=example>
|
|
<pre><!--
|
|
-->@media screen and (min-width: 200px) {
|
|
<!-- --> @viewport {
|
|
<!-- --> width: 100px;
|
|
<!-- --> }
|
|
<!-- -->}
|
|
<!-- -->
|
|
<!-- -->@media screen and (max-width: 200px) {
|
|
<!-- --> @viewport {
|
|
<!-- --> width: 300px;
|
|
<!-- --> }
|
|
<!-- -->}<!--
|
|
--></pre>
|
|
</div>
|
|
|
|
<p class=issue>There are prefixed implementations of a media feature for
|
|
the device:css pixel ratio (-webkit-device-pixel-ratio /
|
|
-o-device-pixel-ratio). Should be standardized here or in a new level of
|
|
Media Queries?
|
|
|
|
<h2 id=cssom><span class=secno>8. </span>CSSOM</h2>
|
|
|
|
<p class=issue>Properties in the CSSOM and CSSOM View specifications refer
|
|
to the <span>viewport</span> and the <span>initial containing
|
|
block</span>. If any of those properties should refer to the <a
|
|
href="#initial-viewport">initial viewport</a> and not the <a
|
|
href="#actual-viewport">actual viewport</a>, those exceptions need to be
|
|
adressed.
|
|
|
|
<p class=issue>Standardize window.devicePixelRatio? Should be done in the
|
|
CSSOM View spec perhaps?
|
|
|
|
<h2 id=conformance><span class=secno>9. </span>Conformance</h2>
|
|
|
|
<p>Requirements for a conforming UA:
|
|
|
|
<ul>
|
|
<li>
|
|
<p>The ‘<a href="#min-width"><code
|
|
class=property>min-width</code></a>’, ‘<a
|
|
href="#max-width"><code class=property>max-width</code></a>’,
|
|
‘<a href="#width"><code class=property>width</code></a>’,
|
|
‘<a href="#min-height"><code
|
|
class=property>min-height</code></a>’, ‘<a
|
|
href="#max-height"><code class=property>max-height</code></a>’,
|
|
and ‘<a href="#height"><code
|
|
class=property>height</code></a>’ properties must be supported.
|
|
|
|
<li>
|
|
<p>The ‘<a href="#min-zoom"><code
|
|
class=property>min-zoom</code></a>’, ‘<a
|
|
href="#max-zoom"><code class=property>max-zoom</code></a>’, and
|
|
‘<a href="#zoom"><code class=property
|
|
title="zoom!!property">zoom</code></a>’ properties must be
|
|
supported as input to the <a href="#constraining-procedure">constraining
|
|
procedure</a>. However, the UA may choose to use a different zoom factor
|
|
when presenting the document to the user, and use different minimum and
|
|
maximum zoom limits for the user interaction.</p>
|
|
|
|
<p>This will for instance allow UAs without zooming capabilities to
|
|
conform and still have interoperable implementations when it comes to
|
|
viewport dimensions. It will also allow the UA to choose a different
|
|
zoom factor when content overflows the <a href="#actual-viewport">actual
|
|
viewport</a>.
|
|
|
|
<li>
|
|
<p>Support for the ‘<a href="#user-zoom"><code
|
|
class=property>user-zoom</code></a>’ and ‘<a
|
|
href="#orientation"><code class=property>orientation</code></a>’
|
|
properties is optional.
|
|
</ul>
|
|
|
|
<p class=issue>Need to say something about the resolution property if it is
|
|
kept.
|
|
|
|
<h2 id=viewport-meta-element><span class=secno>10. </span>Viewport <code
|
|
class=html>META</code> element</h2>
|
|
|
|
<p><em>This section is not normative.</em>
|
|
|
|
<p>This section describes a mapping from the content attribute of the
|
|
viewport <code class=html>META</code> element, first implemented by Apple
|
|
in the iPhone Safari browser, to the properties of the <code
|
|
class=css>@viewport</code> rule described in this specification.
|
|
|
|
<h3 id=ua-stylesheet><span class=secno>10.1. </span>UA stylesheet</h3>
|
|
|
|
<p>In order to match the Safari implementation, the following parsing
|
|
algorithm and translation rules rely on the UA stylesheet below.
|
|
|
|
<pre><!--
|
|
-->@viewport {
|
|
<!-- --> width: 980px;
|
|
<!-- --> min-zoom: 0.25;
|
|
<!-- --> max-zoom: 5;
|
|
<!-- -->}<!--
|
|
--></pre>
|
|
|
|
<p class=note>Note that these values might not fit well with all UAs. For
|
|
instance, with a min-zoom of 0.25 you will be able to fit the whole width
|
|
of the document inside the window for widths up to 1280px on a 320px wide
|
|
device like the iPhone, but only 960px if you have 240px display.
|
|
|
|
<h3 id=meta-properties><span class=secno>10.2. </span>Properties</h3>
|
|
|
|
<p>The recognized properties in the viewport <code class=html>META</code>
|
|
element are:
|
|
|
|
<ul>
|
|
<li><code class=index id=width1 title="width!!viewport META">width</code>
|
|
|
|
<li><code class=index id=height1 title="height!!viewport
|
|
META">height</code>
|
|
|
|
<li><code class=index id=initial-scale>initial-scale</code>
|
|
|
|
<li><code class=index id=minimum-scale>minimum-scale</code>
|
|
|
|
<li><code class=index id=maximum-scale>maximum-scale</code>
|
|
|
|
<li><code class=index id=user-scalable>user-scalable</code>
|
|
|
|
<li><code class=index id=target-densitydpi>target-densityDpi</code><span
|
|
class=issue>At risk since ‘<a href="#resolution"><code
|
|
class=property>resolution</code></a>’ is at risk.</span>
|
|
</ul>
|
|
|
|
<h3 id=parsing-algorithm><span class=secno>10.3. </span>Parsing algorithm</h3>
|
|
|
|
<p>Below is an algorithm for parsing the <code class=html>content</code>
|
|
attribute of the <code class=html>META</code> tag produced from testing
|
|
Safari on the iPhone. <span class=note id=tested-safari>The testing was
|
|
done on an iPod touch running iPhone OS 4. The UA string of the browser:
|
|
<code>"Mozilla/5.0 (iPod; U; CPU iPhone OS 4_0 like Mac OS X; en-us)
|
|
AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293
|
|
Safari/6531.22.7"</code>.</span> The pseudo code notation used is based on
|
|
the notation used in <a href="#Algorithms"
|
|
rel=biblioentry>[Algorithms]</a>. The white-space class contains the
|
|
following characters (ascii):
|
|
|
|
<ul>
|
|
<li>Horizontal tab (0x09)
|
|
|
|
<li>Line feed (0x0a)
|
|
|
|
<li>Carriage return (0x0d)
|
|
|
|
<li>Space (0x20)
|
|
</ul>
|
|
|
|
<pre class=algorithm><!--
|
|
--><span class=method><span class=method-name>Parse-Content</span>(<span class=variable>S</span>)</span>
|
|
<!----><span class=statement><span class=variable>i</span> ← 1</span>
|
|
<!----><span class=statement><span class=keyword>while</span> <span class=variable>i</span> ≤ <span class=op>length</span>[<span class=variable>S</span>]</span>
|
|
<!----><span class=statement> <span class=keyword>do</span> <span class=keyword>while</span> <span class=variable>i</span> ≤ <span class=op>length</span>[<span class=variable>S</span>] and <span class=variable>S</span>[<span class=variable>i</span>] in [white-space, ',', '=']</span>
|
|
<!----><span class=statement> <span class=keyword>do</span> <span class=variable>i</span> ← <span class=variable>i</span> + 1</span>
|
|
<!----><span class=statement> <span class=keyword>if</span> <span class=variable>i</span> ≤ <span class=op>length</span>[<span class=variable>S</span>]</span>
|
|
<!----><span class=statement> <span class=keyword>then</span> <span class=variable>i</span> ← <span class=method-name>Parse-Property</span>(<span class=variable>S</span>, <span class=variable>i</span>)</span>
|
|
<!---->
|
|
<!----><span class=method><span class=method-name>Parse-Property</span>(<span class=variable>S</span>, <span class=variable>i</span>)</span>
|
|
<!----><span class=statement><span class=variable>start</span> ← <span class=variable>i</span></span>
|
|
<!----><span class=statement><span class=keyword>while</span> <span class=variable>i</span> ≤ <span class=op>length</span>[<span class=variable>S</span>] and <span class=variable>S</span>[<span class=variable>i</span>] <span class=keyword>not</span> in [white-space, ',', '=']</span>
|
|
<!----><span class=statement> <span class=keyword>do</span> <span class=variable>i</span> ← <span class=variable>i</span> + 1</span>
|
|
<!----><span class=statement><span class=keyword>if</span> <span class=variable>i</span> > <span class=op>length</span>[<span class=variable>S</span>] or <span class=variable>S</span>[<span class=variable>i</span>] = ','</span>
|
|
<!----><span class=statement> <span class=keyword>then</span> <span class=keyword>return</span> <span class=variable>i</span></span>
|
|
<!----><span class=statement><span class=variable>property-name</span> ← <span class=variable>S</span>[<span class=variable>start</span> .. (<span class=variable>i</span> - 1)]</span>
|
|
<!----><span class=statement><span class=keyword>while</span> <span class=variable>i</span> ≤ <span class=op>length</span>[<span class=variable>S</span>] and <span class=variable>S</span>[<span class=variable>i</span>] <span class=keyword>not</span> in [',', '=']</span>
|
|
<!----><span class=statement> <span class=keyword>do</span> <span class=variable>i</span> ← <span class=variable>i</span> + 1</span>
|
|
<!----><span class=statement><span class=keyword>if</span> <span class=variable>i</span> > <span class=op>length</span>[<span class=variable>S</span>] or <span class=variable>S</span>[<span class=variable>i</span>] = ','</span>
|
|
<!----><span class=statement> <span class=keyword>then</span> <span class=keyword>return</span> <span class=variable>i</span></span>
|
|
<!----><span class=statement><span class=keyword>while</span> <span class=variable>i</span> ≤ <span class=op>length</span>[<span class=variable>S</span>] and <span class=variable>S</span>[<span class=variable>i</span>] in [white-space, '=']</span>
|
|
<!----><span class=statement> <span class=keyword>do</span> <span class=variable>i</span> ← <span class=variable>i</span> + 1</span>
|
|
<!----><span class=statement><span class=keyword>if</span> <span class=variable>i</span> > <span class=op>length</span>[<span class=variable>S</span>] or <span class=variable>S</span>[<span class=variable>i</span>] = ','</span>
|
|
<!----><span class=statement> <span class=keyword>then</span> <span class=keyword>return</span> <span class=variable>i</span></span>
|
|
<!----><span class=statement><span class=variable>start</span> ← <span class=variable>i</span></span>
|
|
<!----><span class=statement><span class=keyword>while</span> <span class=variable>i</span> ≤ <span class=op>length</span>[<span class=variable>S</span>] and <span class=variable>S</span>[<span class=variable>i</span>] <span class=keyword>not</span> in [white-space, ',', '=']</span>
|
|
<!----><span class=statement> <span class=keyword>do</span> <span class=variable>i</span> ← <span class=variable>i</span> + 1</span>
|
|
<!----><span class=statement><span class=variable>property-value</span> ← <span class=variable>S</span>[<span class=variable>start</span> .. (<span class=variable>i</span> - 1)]</span>
|
|
<!----><span class=statement><span class=method-name>Set-Property</span>(<span class=variable>property-name</span>, <span class=variable>property-value</span>)</span>
|
|
<!----><span class=statement><span class=keyword>return</span> <span class=variable>i</span></span><!--
|
|
--></pre>
|
|
|
|
<p> <span class=method-name>Set-Property</span> matches the <a
|
|
href="#meta-properties">listed property names</a> case-insensitively. The
|
|
<code class=variable>property-value</code> strings are interpreted as
|
|
follows:
|
|
|
|
<ol>
|
|
<li>If a prefix of <code class=variable>property-value</code> can be
|
|
converted to a number using <code>strtod</code>, the value will be that
|
|
number. The remainder of the string is ignored.
|
|
|
|
<li>If the value can not be converted to a number as described above, the
|
|
whole <code class=variable>property-value</code> string will be matched
|
|
with the following strings case-insensitively: <code class=index
|
|
id=yes>yes</code>, <code class=index id=no>no</code>, <code class=index
|
|
id=device-width0 title="device-width!!viewport META">device-width</code>,
|
|
<code class=index id=device-height0 title="device-height!!viewport
|
|
META">device-height</code>
|
|
|
|
<li>If the string did not match any of the known strings, the value is
|
|
unknown.
|
|
</ol>
|
|
|
|
<h3 id=translation-into-viewport-properties><span class=secno>10.4.
|
|
</span>Translation into <code class=css>@viewport</code> properties</h3>
|
|
|
|
<p>The Viewport <code class=html>META</code> element is placed in the
|
|
cascade as if it was a <code class=html>STYLE</code> element, in the exact
|
|
same place in the dom, that only contains a single <code
|
|
class=css>@viewport</code> rule.
|
|
|
|
<p>Each of the property/value pair from the parsing in the previous section
|
|
are translated, and added to that single at-rule as follows:
|
|
|
|
<h4 class="no-num no-toc" id=unknown-properties>Unknown properties</h4>
|
|
|
|
<p>Unknown properties are dropped.
|
|
|
|
<h4 class="no-num no-toc" id=the-width-and-height-properties>The <code
|
|
class=index id=width2 title="width!!viewport META">width</code> and <code
|
|
class=index id=height2 title="height!!viewport META">height</code>
|
|
properties</h4>
|
|
|
|
<p>The <code class=index id=width3 title="width!!viewport
|
|
META">width</code> and <code class=index id=height3
|
|
title="height!!viewport META">height</code> viewport <code
|
|
class=html>META</code> properties are translated into ‘<a
|
|
href="#width"><code class=property>width</code></a>’ and ‘<a
|
|
href="#height"><code class=property>height</code></a>’ shorthand
|
|
properties, effectively setting the min and max properties to the same
|
|
value.
|
|
|
|
<ol>
|
|
<li>Non-negative number values are translated to pixel lengths, clamped to
|
|
the range: <code>[1px, 10000px]</code>
|
|
|
|
<li>Negative number values are dropped
|
|
|
|
<li><code class=index id=device-width1 title="device-width!!viewport
|
|
META">device-width</code> and <code class=index id=device-height1
|
|
title="device-height!!viewport META">device-height</code> are used as
|
|
keywords
|
|
|
|
<li>Other keywords and unknown values translate to 1px
|
|
</ol>
|
|
|
|
<p>For a viewport <code class=html>META</code> element that translates into
|
|
an <code class=css>@viewport</code> rule with a non-‘<code
|
|
class=css>auto</code>’ ‘<a href="#zoom"><code class=property
|
|
title="zoom!!property">zoom</code></a>’ declaration and no ‘<a
|
|
href="#width"><code class=property>width</code></a>’ declaration,
|
|
add:
|
|
|
|
<pre>width: auto;</pre>
|
|
|
|
<p>to the <code class=css>@viewport</code> rule.
|
|
|
|
<div class=example>
|
|
<p>This <code class=html>META</code> element:</p>
|
|
|
|
<pre><!--
|
|
--><meta name="viewport" content="initial-scale=1.0"><!--
|
|
--></pre>
|
|
|
|
<p>translates into:</p>
|
|
|
|
<pre><!--
|
|
-->@viewport {
|
|
<!-- --> zoom: 1.0;
|
|
<!-- --> width: auto;
|
|
<!-- -->}<!--
|
|
--></pre>
|
|
</div>
|
|
|
|
<h4 class="no-num no-toc" id=the-initial-scale-minimum-scale-and-maxi>The
|
|
<code class=index id=initial-scale0>initial-scale</code>, <code
|
|
class=index id=minimum-scale0>minimum-scale</code>, and <code class=index
|
|
id=maximum-scale0>maximum-scale</code> properties</h4>
|
|
|
|
<p>The properties are translated into ‘<a href="#zoom"><code
|
|
class=property title="zoom!!property">zoom</code></a>’, ‘<a
|
|
href="#min-zoom"><code class=property>min-zoom</code></a>’, and
|
|
‘<a href="#max-zoom"><code class=property>max-zoom</code></a>’
|
|
respectively with the following translations of values.
|
|
|
|
<ol>
|
|
<li>Non-negative number values are translated to <number> values,
|
|
clamped to the range <code>[0.1, 10]</code>
|
|
|
|
<li>Negative number values are dropped
|
|
|
|
<li><code class=index id=yes0>yes</code> is translated to 1
|
|
|
|
<li><code class=index id=device-width2 title="device-width!!viewport
|
|
META">device-width</code> and <code class=index id=device-height2
|
|
title="device-height!!viewport META">device-height</code> are translated
|
|
to 10
|
|
|
|
<li><code class=index id=no0>no</code> and unknown values are translated
|
|
to 0.1
|
|
</ol>
|
|
|
|
<p>For a viewport <code class=html>META</code> element that translates into
|
|
an <code class=css> @viewport</code> rule with no ‘<a
|
|
href="#max-zoom"><code class=property>max-zoom</code></a>’
|
|
declaration and a non-‘<code class=css>auto</code>’ ‘<a
|
|
href="#min-zoom"><code class=property>min-zoom</code></a>’ value
|
|
that is larger than the ‘<a href="#max-zoom"><code
|
|
class=property>max-zoom</code></a>’ value of the UA stylesheet, the
|
|
‘<a href="#min-zoom"><code class=property>min-zoom</code></a>’
|
|
declaration value is clamped to the UA stylesheet ‘<a
|
|
href="#max-zoom"><code class=property>max-zoom</code></a>’ value.
|
|
|
|
<h4 class="no-num no-toc" id=the-user-scalable-property>The <code
|
|
class=index id=user-scalable0>user-scalable</code> property</h4>
|
|
|
|
<p>The <code class=index id=user-scalable1>user-scalable</code> property is
|
|
translated into ‘<a href="#user-zoom"><code
|
|
class=property>user-zoom</code></a>’ with the following value
|
|
translations.
|
|
|
|
<ol>
|
|
<li><code class=index id=yes1>yes</code> and <code class=index
|
|
id=no1>no</code> are translated into ‘<a href="#zoom0"><code
|
|
class=css title="zoom!!value">zoom</code></a>’ and ‘<a
|
|
href="#fixed"><code class=css>fixed</code></a>’ respectively.
|
|
|
|
<li>Numbers ≥ 1, numbers ≤ -1, <code class=index id=device-width3
|
|
title="device-width!!viewport META">device-width</code> and <code
|
|
class=index id=device-height3 title="device-height!!viewport
|
|
META">device-height</code> are mapped to ‘<a href="#zoom0"><code
|
|
class=css title="zoom!!value">zoom</code></a>’
|
|
|
|
<li>Numbers in the range <code><-1, 1></code>, and unknown values,
|
|
are mapped to ‘<a href="#fixed"><code
|
|
class=css>fixed</code></a>’
|
|
</ol>
|
|
|
|
<div class=example>
|
|
<p>This <code class=html>META</code> element:</p>
|
|
|
|
<pre><meta name="viewport" content="width=480, initial-scale=2.0, user-scalable=1"></pre>
|
|
|
|
<p>will translate into this <code class=css>@viewport</code> block:</p>
|
|
|
|
<pre><!--
|
|
-->@viewport {
|
|
<!-- --> width: 480px;
|
|
<!-- --> zoom: 2.0;
|
|
<!-- --> user-zoom: zoom;
|
|
<!-- -->}<!--
|
|
--></pre>
|
|
</div>
|
|
|
|
<h4 class="no-num no-toc" id=the-target-densitydpi-property>The <code
|
|
class=index id=target-densitydpi0>target-densityDpi</code> property</h4>
|
|
|
|
<p class=issue>At risk since ‘<a href="#resolution"><code
|
|
class=property>resolution</code></a>’ is at risk.
|
|
|
|
<p class=note>This property differ from the others since it is from the
|
|
WebKit implementation used in the Android browser and not supported in
|
|
Safari
|
|
|
|
<p>The <code class=index id=target-densitydpi1>target-densityDpi</code>
|
|
property is translated into ‘<a href="#resolution"><code
|
|
class=property>resolution</code></a>’ with the following value
|
|
translations.
|
|
|
|
<ol>
|
|
<li>Number values in the range <code>[70, 400]</code> are translated to
|
|
‘<code class=css>dpi</code>’ values.
|
|
|
|
<li><code class=index id=device-dpi>device-dpi</code> translates to
|
|
‘<a href="#device"><code class=css>device</code></a>’
|
|
|
|
<li><code class=index id=low-dpi>low-dpi</code> translates to 120dpi
|
|
|
|
<li><code class=index id=medium-dpi>medium-dpi</code> translates to 160dpi
|
|
|
|
<li><code class=index id=high-dpi>high-dpi</code> translates to 240dpi
|
|
|
|
<li>Other values are dropped
|
|
</ol>
|
|
|
|
<h2 id=handling-auto-zoom><span class=secno>11. </span>Handling ‘<a
|
|
href="#auto0"><code class=css title="auto!!zoom">auto</code></a>’
|
|
for ‘<a href="#zoom"><code class=property
|
|
title="zoom!!property">zoom</code></a>’</h2>
|
|
|
|
<p><em>This section is not normative.</em>
|
|
|
|
<p>This section presents one way of picking an actual value for the
|
|
‘<a href="#zoom"><code class=property
|
|
title="zoom!!property">zoom</code></a>’ property when the used value
|
|
is ‘<a href="#auto0"><code class=css
|
|
title="auto!!zoom">auto</code></a>’.
|
|
|
|
<p>Given an <a href="#initial-viewport">initial viewport</a> with size
|
|
<code>(initial-width, initial-height)</code>, and a finite region within
|
|
the <a href="http://www.w3.org/TR/CSS21/intro.html#canvas">canvas</a>
|
|
where the formatting structure is rendered <code>(rendered-width,
|
|
rendered-height)</code>. That region is at least as large as the <a
|
|
href="#actual-viewport">actual viewport</a>.
|
|
|
|
<p>Then, if the used value of ‘<a href="#zoom"><code class=property
|
|
title="zoom!!property">zoom</code></a>’ is ‘<a
|
|
href="#auto0"><code class=css title="auto!!zoom">auto</code></a>’,
|
|
let the actual zoom factor be:
|
|
|
|
<pre>
|
|
<!---->zoom = MAX(initial-width / rendered-width, initial-height / rendered-height)<!--
|
|
--></pre>
|
|
|
|
<p>The actual zoom factor should also be further limited by the [min-zoom,
|
|
max-zoom] range.
|
|
|
|
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
|
|
|
|
<h2 class=no-num id=references>References</h2>
|
|
|
|
<h3 class=no-num id=normative-references>Normative references</h3>
|
|
<!--begin-normative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id=CSS21>[CSS21]
|
|
|
|
<dd>Bert Bos; et al. <a
|
|
href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
|
|
Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
|
|
2011. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3SYN>[CSS3SYN]
|
|
|
|
<dd>L. David Baron. <a
|
|
href="http://www.w3.org/TR/2003/WD-css3-syntax-20030813"><cite>CSS3
|
|
module: Syntax.</cite></a> 13 August 2003. W3C Working Draft. (Work in
|
|
progress.) URL: <a
|
|
href="http://www.w3.org/TR/2003/WD-css3-syntax-20030813">http://www.w3.org/TR/2003/WD-css3-syntax-20030813</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3VAL>[CSS3VAL]
|
|
|
|
<dd>Håkon Wium Lie; Chris Lilley. <a
|
|
href="http://www.w3.org/TR/2006/WD-css3-values-20060919"><cite>CSS3
|
|
Values and Units.</cite></a> 19 September 2006. W3C Working Draft. (Work
|
|
in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2006/WD-css3-values-20060919">http://www.w3.org/TR/2006/WD-css3-values-20060919</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=MEDIAQ>[MEDIAQ]
|
|
|
|
<dd>Håkon Wium Lie; et al. <a
|
|
href="http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/"><cite>Media
|
|
Queries.</cite></a> 27 July 2010. W3C Candidate Recommendation. (Work in
|
|
progress.) URL: <a
|
|
href="http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/">http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/</a>
|
|
</dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-normative-->
|
|
|
|
<h3 class=no-num id=other-references>Other references</h3>
|
|
|
|
<dl class=bibliography>
|
|
<dt id=Algorithms>[Algorithms]
|
|
|
|
<dd>Thomas H. Cormen; et al. <cite>Introduction to Algorithms, Second
|
|
Edition, MIT Press.</cite>
|
|
</dl>
|
|
|
|
<h2 class=no-num id=property-index>Property index</h2>
|
|
<!--begin-properties-->
|
|
|
|
<table class=proptable>
|
|
<thead>
|
|
<tr>
|
|
<th>Property
|
|
|
|
<th>Values
|
|
|
|
<th>Initial
|
|
|
|
<th>Applies to
|
|
|
|
<th>Inh.
|
|
|
|
<th>Percentages
|
|
|
|
<th>Media
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th><a class=property href="#height">height</a>
|
|
|
|
<td><viewport-length>{1,2}
|
|
|
|
<td>See individual properties
|
|
|
|
<td>N/A
|
|
|
|
<td>N/A
|
|
|
|
<td>See individual properties
|
|
|
|
<td>visual, continuous
|
|
|
|
<tr>
|
|
<th><a class=property href="#max-height">max-height</a>
|
|
|
|
<td><viewport-length>
|
|
|
|
<td>auto
|
|
|
|
<td>N/A
|
|
|
|
<td>N/A
|
|
|
|
<td>Refer to the height of the initial viewport
|
|
|
|
<td>visual, continuous
|
|
|
|
<tr>
|
|
<th><a class=property href="#max-width">max-width</a>
|
|
|
|
<td><viewport-length>
|
|
|
|
<td>auto
|
|
|
|
<td>N/A
|
|
|
|
<td>N/A
|
|
|
|
<td>Refer to the width of the initial viewport
|
|
|
|
<td>visual, continuous
|
|
|
|
<tr>
|
|
<th><a class=property href="#max-zoom">max-zoom</a>
|
|
|
|
<td>auto | <number> | <percentage>
|
|
|
|
<td>auto
|
|
|
|
<td>N/A
|
|
|
|
<td>N/A
|
|
|
|
<td>The zoom factor itself
|
|
|
|
<td>visual, continuous
|
|
|
|
<tr>
|
|
<th><a class=property href="#min-height">min-height</a>
|
|
|
|
<td><viewport-length>
|
|
|
|
<td>auto
|
|
|
|
<td>N/A
|
|
|
|
<td>N/A
|
|
|
|
<td>Refer to the height of the initial viewport
|
|
|
|
<td>visual, continuous
|
|
|
|
<tr>
|
|
<th><a class=property href="#min-width">min-width</a>
|
|
|
|
<td><viewport-length>
|
|
|
|
<td>auto
|
|
|
|
<td>N/A
|
|
|
|
<td>N/A
|
|
|
|
<td>Refer to the width of the initial viewport
|
|
|
|
<td>visual, continuous
|
|
|
|
<tr>
|
|
<th><a class=property href="#min-zoom">min-zoom</a>
|
|
|
|
<td>auto | <number> | <percentage>
|
|
|
|
<td>auto
|
|
|
|
<td>N/A
|
|
|
|
<td>N/A
|
|
|
|
<td>The zoom factor itself
|
|
|
|
<td>visual, continuous
|
|
|
|
<tr>
|
|
<th><a class=property href="#orientation">orientation</a>
|
|
|
|
<td>auto | portrait | landscape
|
|
|
|
<td>auto
|
|
|
|
<td>N/A
|
|
|
|
<td>N/A
|
|
|
|
<td>N/A
|
|
|
|
<td>visual, continuous
|
|
|
|
<tr>
|
|
<th><a class=property href="#resolution">resolution</a>
|
|
|
|
<td>auto | device | <resolution>
|
|
|
|
<td>auto
|
|
|
|
<td>N/A
|
|
|
|
<td>N/A
|
|
|
|
<td>N/A
|
|
|
|
<td>visual, continuous
|
|
|
|
<tr>
|
|
<th><a class=property href="#user-zoom">user-zoom</a>
|
|
|
|
<td>zoom | fixed
|
|
|
|
<td>zoom
|
|
|
|
<td>N/A
|
|
|
|
<td>N/A
|
|
|
|
<td>N/A
|
|
|
|
<td>visual, continuous
|
|
|
|
<tr>
|
|
<th><a class=property href="#width">width</a>
|
|
|
|
<td><viewport-length>{1,2}
|
|
|
|
<td>See individual properties
|
|
|
|
<td>N/A
|
|
|
|
<td>N/A
|
|
|
|
<td>See individual properties
|
|
|
|
<td>visual, continuous
|
|
|
|
<tr>
|
|
<th><span class=property>zoom</span>
|
|
|
|
<td>auto | <number> | <percentage>
|
|
|
|
<td>auto
|
|
|
|
<td>N/A
|
|
|
|
<td>N/A
|
|
|
|
<td>The zoom factor itself
|
|
|
|
<td>visual, continuous
|
|
</table>
|
|
<!--end-properties-->
|
|
|
|
<h2 class=no-num id=index>Index</h2>
|
|
<!--begin-index-->
|
|
|
|
<ul class=indexlist>
|
|
<li>actual viewport, <a href="#actual-viewport" title="actual
|
|
viewport"><strong>3.</strong></a>
|
|
|
|
<li>auto
|
|
<ul>
|
|
<li>length, <a href="#auto" title="auto,
|
|
length"><strong>5.1.</strong></a>
|
|
|
|
<li>max-zoom, <a href="#auto2" title="auto,
|
|
max-zoom"><strong>5.7.</strong></a>
|
|
|
|
<li>min-zoom, <a href="#auto1" title="auto,
|
|
min-zoom"><strong>5.6.</strong></a>
|
|
|
|
<li>orientation, <a href="#auto3" title="auto,
|
|
orientation"><strong>5.9.</strong></a>
|
|
|
|
<li>resolution, <a href="#auto4" title="auto,
|
|
resolution"><strong>5.10.</strong></a>
|
|
|
|
<li>zoom, <a href="#auto0" title="auto, zoom"><strong>5.5.</strong></a>
|
|
</ul>
|
|
|
|
<li>device, <a href="#device" title=device><strong>5.10.</strong></a>
|
|
|
|
<li>device-dpi, <a href="#device-dpi" title=device-dpi>#</a>
|
|
|
|
<li>device-height, <a href="#device-height"
|
|
title=device-height><strong>5.1.</strong></a>
|
|
<ul>
|
|
<li>viewport META, <a href="#device-height0" title="device-height,
|
|
viewport META">10.3.</a>, <a href="#device-height1"
|
|
title="device-height, viewport META">#</a>, <a href="#device-height2"
|
|
title="device-height, viewport META">#</a>, <a href="#device-height3"
|
|
title="device-height, viewport META">#</a>
|
|
</ul>
|
|
|
|
<li>device-width, <a href="#device-width"
|
|
title=device-width><strong>5.1.</strong></a>
|
|
<ul>
|
|
<li>viewport META, <a href="#device-width0" title="device-width,
|
|
viewport META">10.3.</a>, <a href="#device-width1" title="device-width,
|
|
viewport META">#</a>, <a href="#device-width2" title="device-width,
|
|
viewport META">#</a>, <a href="#device-width3" title="device-width,
|
|
viewport META">#</a>
|
|
</ul>
|
|
|
|
<li>fixed, <a href="#fixed" title=fixed><strong>5.8.</strong></a>
|
|
|
|
<li>height, <a href="#height" title=height><strong>5.4.</strong></a>
|
|
<ul>
|
|
<li>initial, <a href="#initial-height" title="height, initial">6.1.</a>
|
|
|
|
<li>resolved, <a href="#height0" title="height, resolved">6.1.</a>
|
|
|
|
<li>viewport META, <a href="#height1" title="height, viewport
|
|
META">10.2.</a>, <a href="#height2" title="height, viewport
|
|
META">#</a>, <a href="#height3" title="height, viewport META">#</a>
|
|
</ul>
|
|
|
|
<li>high-dpi, <a href="#high-dpi" title=high-dpi>#</a>
|
|
|
|
<li>initial-scale, <a href="#initial-scale" title=initial-scale>10.2.</a>,
|
|
<a href="#initial-scale0" title=initial-scale>#</a>
|
|
|
|
<li>initial viewport, <a href="#initial-viewport" title="initial
|
|
viewport"><strong>3.</strong></a>
|
|
|
|
<li>landscape, <a href="#landscape"
|
|
title=landscape><strong>5.9.</strong></a>
|
|
|
|
<li>low-dpi, <a href="#low-dpi" title=low-dpi>#</a>
|
|
|
|
<li>max-height, <a href="#max-height"
|
|
title=max-height><strong>5.3.</strong></a>
|
|
|
|
<li>maximum-scale, <a href="#maximum-scale" title=maximum-scale>10.2.</a>,
|
|
<a href="#maximum-scale0" title=maximum-scale>#</a>
|
|
|
|
<li>max-width, <a href="#max-width"
|
|
title=max-width><strong>5.1.</strong></a>
|
|
|
|
<li>max-zoom, <a href="#max-zoom" title=max-zoom><strong>5.7.</strong></a>
|
|
|
|
|
|
<li>medium-dpi, <a href="#medium-dpi" title=medium-dpi>#</a>
|
|
|
|
<li>min-height, <a href="#min-height"
|
|
title=min-height><strong>5.3.</strong></a>
|
|
|
|
<li>minimum-scale, <a href="#minimum-scale" title=minimum-scale>10.2.</a>,
|
|
<a href="#minimum-scale0" title=minimum-scale>#</a>
|
|
|
|
<li>min-width, <a href="#min-width"
|
|
title=min-width><strong>5.1.</strong></a>
|
|
|
|
<li>min-zoom, <a href="#min-zoom" title=min-zoom><strong>5.6.</strong></a>
|
|
|
|
|
|
<li>no, <a href="#no" title=no>10.3.</a>, <a href="#no0" title=no>#</a>,
|
|
<a href="#no1" title=no>#</a>
|
|
|
|
<li>orientation, <a href="#orientation"
|
|
title=orientation><strong>5.9.</strong></a>
|
|
|
|
<li>portrait, <a href="#portrait" title=portrait><strong>5.9.</strong></a>
|
|
|
|
|
|
<li>resolution, <a href="#resolution"
|
|
title=resolution><strong>5.10.</strong></a>
|
|
|
|
<li><resolution>, <a href="#ltresolutiongt"
|
|
title="<resolution>"><strong>5.10.</strong></a>
|
|
|
|
<li>target-densityDpi, <a href="#target-densitydpi"
|
|
title=target-densityDpi>10.2.</a>, <a href="#target-densitydpi0"
|
|
title=target-densityDpi>#</a>, <a href="#target-densitydpi1"
|
|
title=target-densityDpi>#</a>
|
|
|
|
<li>user-scalable, <a href="#user-scalable" title=user-scalable>10.2.</a>,
|
|
<a href="#user-scalable0" title=user-scalable>#</a>, <a
|
|
href="#user-scalable1" title=user-scalable>#</a>
|
|
|
|
<li>user-zoom, <a href="#user-zoom"
|
|
title=user-zoom><strong>5.8.</strong></a>
|
|
|
|
<li><viewport-length>, <a href="#ltviewport-lengthgt"
|
|
title="<viewport-length>"><strong>5.1.</strong></a>
|
|
|
|
<li>width, <a href="#width" title=width><strong>5.2.</strong></a>
|
|
<ul>
|
|
<li>initial, <a href="#initial-width" title="width, initial">6.1.</a>
|
|
|
|
<li>resolved, <a href="#width0" title="width, resolved">6.1.</a>
|
|
|
|
<li>viewport META, <a href="#width1" title="width, viewport
|
|
META">10.2.</a>, <a href="#width2" title="width, viewport META">#</a>,
|
|
<a href="#width3" title="width, viewport META">#</a>
|
|
</ul>
|
|
|
|
<li>yes, <a href="#yes" title=yes>10.3.</a>, <a href="#yes0"
|
|
title=yes>#</a>, <a href="#yes1" title=yes>#</a>
|
|
|
|
<li>zoom
|
|
<ul>
|
|
<li>property, <a href="#zoom" title="zoom,
|
|
property"><strong>5.5.</strong></a>
|
|
|
|
<li>value, <a href="#zoom0" title="zoom,
|
|
value"><strong>5.8.</strong></a>
|
|
</ul>
|
|
</ul>
|
|
<!--end-index-->
|