@viewport rule which allows authors to control and
-opt-out of this behavior.
+well on small viewports.
Issue: This specification is written from an implementation-centric point of view,
making it arguably difficult to read.
@@ -65,75 +63,6 @@ Issue: Various issues about this specification and related specifications
are listed in this report.
-@viewport rule.
-
-
- <!doctype html>
- <html>
- <head>
- <title>My Site</title>
- <style>
- @viewport { width: auto; }
- </style>
- </head>
- <body>
- Since this document is just some simple text, it can be rendered
- at any width without issue. The text will just re-wrap as needed
- when viewed in a smaller viewport.
- </body>
- </html>
-
-@viewport rule in
- combination with a media query. When the viewport would be smaller than
- 384px, the user agent will select 384px as the initial containing block
- size and scale the resulting layout down to fit the available space.
-
-
- <!doctype html>
- <html>
- <head>
- <style>
- @viewport { width: auto; }
- @media (max-width: 384px) {
- @viewport { width: 384px; }
- }
- body {
- margin: 0;
- }
- img {
- min-width: 384px;
- }
- </style>
- <title>My Other Site</title>
- </head>
- <body>
- <img src="diagram.png">
- </body>
- </html>
-
-<meta> tag.
<BODY> element of
an HTML or XHTML document. For other document types, it is the
computed 'direction' for the root element.
-"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 -UA stylesheet outlined for current mobile -behavior, and that no UA styles for ''@viewport'' will give "desktop" -behavior per default (actual viewport is initial viewport).
- - -An example of such misguided use would be to write @viewport { width: 320px; }
-instead of @viewport { width: auto; }
-to make a document “mobile friendly”.
-
- @viewport {
- width: 320px auto;
- }
-
-
- viewport
- : VIEWPORT_SYM S* '{' S* declaration? [ ';' S* declaration? ]* '}' S*
- ;
-
-
-with the new token:
-
-@{V}{I}{E}{W}{P}{O}{R}{T} {return VIEWPORT_SYM;}
-
-where:
-
-
-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
-
-
-The viewport non-terminal is added to the
-stylesheet production along with the
-ruleset, media, and page
-non-terminals:
-
-- stylesheet - : [ CHARSET_SYM STRING ';' ]? - [S|CDO|CDC]* [ import [ CDO S* | CDC S* ]* ]* - [ [ ruleset | media | page | viewport ] [ CDO S* | CDC S* ]* ]* - ; -- -It is also added to the nested_statement production defined in [[!CSS3-CONDITIONAL]] -to allow ''@viewport'' rules nested inside conditional group rules -such as ''@media'' or ''@supports'': - -
- nested_statement - : ruleset | media | page | font_face_rule | keyframes_rule | - supports_rule | viewport - ; -- - -
min- and max- functionality can be achieved with media queries, should these be removed?
- --Name: min-width -For: @viewport -Value: <- -> -Initial: auto -Percentages: Refer to the width of the ''initial viewport'' -Computed value: auto, an absolute length, or a percentage as specified -
-Name: max-width -For: @viewport -Value: <- -Specifies the minimum and maximum width of -the viewport -that is used to set the size of -the -initial containing block where - -> -Initial: auto -Percentages: Refer to the width of the ''initial viewport'' -Computed value: auto, an absolute length, or a percentage as specified -
<viewport-length> = auto | <length> | <percentage>- -and the values have the following meanings: - -
The user-agent stylesheets recommended in the informative section don't adequately represent current implementation behaviors. Should there be a more explicit mechanism for switching between UA default behavior and requesting the CSS pixel?
- --Name: width -For: @viewport -Value: <- -This is a shorthand descriptor for setting both 'min-width' and -'max-width'. One <>{1,2} -Initial: See individual descriptors -Percentages: See individual descriptors -Computed value: See individual descriptors -
-Name: min-height -For: @viewport -Value: <- -> -Initial: auto -Percentages: Refer to the height of the ''initial viewport'' -Computed value: auto, an absolute length, or a percentage as specified -
-Name: max-height -For: @viewport -Value: <- -Specifies the minimum and maximum height of the -viewport -that is used to set the size of the - -initial containing block. - -The min-height and max-height descriptors are inputs to -the constraining procedure. -The height will initially be set as close as possible to the ''initial -viewport'' height within the min/max constraints. - -> -Initial: auto -Percentages: Refer to the height of the ''initial viewport'' -Computed value: auto, an absolute length, or a percentage as specified -
-Name: height -For: @viewport -Value: <- -This is a shorthand descriptor for setting both min-height and max-height. -One <>{1,2} -Initial: See individual descriptors -Percentages: See individual descriptors -Computed value: See individual descriptors -
-Name: zoom -For: @viewport -Value: auto | <- -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. - -Values have the following meanings: - -> | < > -Initial: auto -Percentages: The zoom factor itself -Computed value: auto, or a non-negative number or percentage as specified -
-Name: min-zoom -For: @viewport -Value: auto | <- -Specifies the smallest allowed zoom factor. It is used as input to the -constraining procedure to constrain -non-''zoom/auto'' 'zoom' 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 'zoom' is ''zoom/auto''. - -Values have the following meanings: - -> | < > -Initial: auto -Percentages: The zoom factor itself -Computed value: auto, or a non-negative number or percentage as specified -
-Name: max-zoom -For: @viewport -Value: auto | <- -Specifies the largest allowed zoom factor. It is used as input to the -constraining procedure to constrain -non-''zoom/auto'' 'zoom' values, but also to limit the allowed zoom factor -that can be set through user interaction. The UA may choose to ignore -this limit for accessibility/usability reasons – see the relevant note in -the 'user-zoom' section. The UA should also use this -value as a constraint when choosing an actual zoom factor when the -used value of 'zoom' is ''zoom/auto''. - -Values have the following meanings: - -> | < > -Initial: auto -Percentages: The zoom factor itself -Computed value: auto, or a non-negative number or percentage as specified -
-Name: user-zoom -For: @viewport -Value: zoom | fixed -Initial: zoom -Percentages: N/A -Computed value: as specified -- -Specifies if the zoom factor can be changed by user interaction or not. - -Values have the following meanings: - -
user-zoom: fixed)
- or limit (with max-zoom) the ability of users to resize
- a document, as this causes accessibility and usability issues.
-
- There may be specific use cases where preventing users from zooming
- may be appropriate, such as map applications – where custom zoom
- functionality is handled via scripting. However, in general this
- practice should be avoided.
-
- Most user agents now allow users to always zoom, regardless
- of any restrictions specified by web content – either by default, or
- as a setting/option (which may however not be immediately apparent
- to users).
--Name: orientation -For: @viewport -Value: auto | portrait | landscape -Initial: auto -Percentages: N/A -Computed value: as specified -- -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. - -Values have the following meanings: - -
width and height refer
-to the resolved viewport size and not the shorthand descriptors. They
-are both initially ''viewport-length/auto''.
-
-MIN/MAX computations where one of the arguments is
-''zoom/auto'' resolve to the other argument. For instance, MIN(0.25,
-''zoom/auto'') = 0.25, and MAX(5, ''zoom/auto'') = 5.
-
-initial-width is the width of the
-''initial viewport'' in pixels at zoom factor 1.0.
-
-initial-height is the height of the
-''initial viewport'' in pixels at zoom factor 1.0.
-
-min-zoom
-and max-zoom valuesmin-zoom is not
- ''zoom/auto'' and max-zoom
- is not ''zoom/auto'', set max-zoom = MAX(min-zoom,
- max-zoom)
- zoom value to
-the [min-zoom, max-zoom] rangezoom is not ''zoom/auto'',
- set zoom = MAX(min-zoom, MIN(max-zoom,
- zoom))
- width
-and height from min/max
-descriptorsmin-width or
- max-width is not
- ''viewport-length/auto'', set width = MAX(min-width, MIN(max-width,
- initial-width))
- min-height or
- max-height is not
- ''viewport-length/auto'', set height = MAX(min-height, MIN(max-height,
- initial-height))
- width valuewidth and
- height are both
- ''viewport-length/auto'', set width = initial-width
- width is
- ''viewport-length/auto'', set width = height * (initial-width /
- initial-height), or width = initial-width
- if initial-height is 0.
- height valueheight is ''viewport-length/auto'',
- set height = width * (initial-height /
- initial-width), or height = initial-height
- if initial-width is 0.
- -- -The UA must however cascade ''@viewport'' rules separately with the -''initial viewport'' 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. - -Procedure for applying CSS rules: - -- “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.” -
-
- The rationale for using the viewport descriptors obtained from applying - the ''@viewport'' rules for evaluating media queries for style - rules, is that media queries should match the ''actual viewport'' - that the document will be laid 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 an - ''initial viewport'' 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 ''actual viewport'' used will be - 320px wide, and in order to match the styles with the ''actual - viewport'' width, the viewport resulting from applying the - ''@viewport'' rules should be used to evaluate the media queries. -
- -
- @viewport {
- width: auto;
- }
-
- @media screen and (min-width: 400px) {
- div { color: red; }
- }
-
- @media screen and (max-width: 400px) {
- div { color: green; }
- }
-
-
- @media screen and (width: 397px) {
- div { color: green; }
- }
-
- @viewport {
- width: 397px;
- }
-
-
- @viewport {
- width: 397px;
- }
-
- @media screen and (width: 397px) {
- @viewport {
- width: 500px;
- }
- }
-
- @media screen and (width: 397px) {
- div { color: green; }
- }
-
-CSSRuleCSSRule
-interface. It provides identification for the new viewport rule.
-
-
-partial interface CSSRule {
- const unsigned short VIEWPORT_RULE = 15;
-};
-
-
-CSSViewportRule
-[Exposed=Window]
-interface CSSViewportRule : CSSRule {
- readonly attribute CSSStyleDeclaration style;
-};
-
-
-<META> element<META> element, first
-implemented by Apple in the iPhone Safari browser, to the descriptors
-of the ''@viewport'' rule described in this
-specification.
+Viewport <meta> element
-In order to match the Safari implementation, the following parsing
-algorithm and translation rules rely on the UA stylesheet below. See the
-section on UA stylesheets for an elaborate
-description.
-
-
-@viewport {
- width: extend-to-zoom 980px;
- min-zoom: 0.25;
- max-zoom: 5;
-}
-
-
-- 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 original iPhone, but only 960px if you have a 240px - display (all widths being given in CSS pixel units). -
+Issue: Specify me<META> element are:
+<meta> element are:
widthheightwidthheightinitial-scaleminimum-scalemaximum-scalecontent
-attribute of the <META> tag produced
+attribute of the <meta> tag produced
from testing Safari on the iPhone. The testing was
done on an iPod touch running iPhone OS 4. The UA string of the
browser: "Mozilla/5.0 (iPod; U; CPU iPhone OS 4_0 like Mac OS X;
@@ -1100,8 +247,8 @@ as follows:
the whole property-value string
will be matched with the following strings
case-insensitively: yes,
- no, device-width,
- device-height
+ no, device-width,
+ device-height
-
If the string did not match any of the known strings, the
@@ -1111,391 +258,7 @@ as follows:
''extend-to-zoom''
-In order to be able to implement the functionality from
-<META> viewport where the viewport width
-or height is extended to fill the viewing area at a given zoom level,
-we introduce a UA internal value to the list of <>
-values called ''extend-to-zoom''. It will be used in width and height
-declarations in the translation outlined in the section below.
-
-This new value is necessary in order to implement the mapping for two
-reasons. First, whether resolving the width/height needs to extend the
-pixel length to the visible width/height for a given zoom factor depends
-on the current initial width/height.
-<meta name="viewport" content="width=400, initial-scale=1">
-yields a width of 400px for an initial-width of 320px, and 640px for an
-initial width of 640px. This can not be expressed as normative min/max
-descriptors that would constrain correctly when the initial width changes
-like for an orientation change.
-
-Secondly, the extended width/height also relies on cascading viewport
-properties from different sources, including 'min-zoom' and 'max-zoom'
-from the UA stylesheet. For instance, if the UA stylesheet
-has max-zoom: 5, and the initial width is 320px,
-<meta name="viewport" content="width=10">
-will resolve to 64px.
-
-
-Resolving 'extend-to-zoom'
-
-The 'extend-to-zoom'
-value is resolved to pixel or auto lengths as part of
-step 3 of the
-constraining procedure. Since this
-is a non-normative descriptor value, the resolution is described
-here. Note that max-descriptors need to be resolved to pixel lengths
-before min-descriptors when
-'extend-to-zoom'
-is a valid value.
-
-Let extend-zoom = MIN(zoom, max-zoom)
-
-For non-''zoom/auto'' extend-zoom, let:
-
-
- extend-width = initial-width / extend-zoom
- extend-height = initial-height / extend-zoom
-
-
-Then, resolve for ''extend-to-zoom'' as follows:
-
-
- - If
extend-zoom is ''zoom/auto'':
-
- -
- If
max-width is
- 'extend-to-zoom', set
- max-width = ''viewport-length/auto''
-
- -
- If
max-height is
- 'extend-to-zoom', set
- max-height = ''viewport-length/auto''
-
- -
- If
min-width is
- 'extend-to-zoom', set
- min-width = max-width
-
- -
- If
min-height is
- 'extend-to-zoom', set
- min-height = max-height
-
-
-
-
- -
- If
extend-zoom is non-''zoom/auto'':
-
- -
- If
max-width is
- 'extend-to-zoom', set
- max-width = extend-width
-
- -
- If
max-height is
- 'extend-to-zoom', set
- max-height = extend-height
-
- -
- If
min-width is
- 'extend-to-zoom', set
- min-width = MAX(extend-width, max-width)
-
- -
- If
min-height is
- 'extend-to-zoom', set
- min-height = MAX(extend-height, max-height)
-
-
-
-
-
-
-Translation into ''@viewport'' descriptors
-
-The Viewport <META> element is placed
-in the cascade as if it was a <STYLE> element,
-in the exact same place in the dom, that only contains a single
-''@viewport'' rule.
-
-Each of the property/value pair from the parsing in the
-previous section are translated, and added to that single at-rule
-as follows:
-
-
-Unknown properties
-
-Unknown properties are dropped.
-
-
-The width
-and height
-properties
-
-The width and
-height
-viewport <META> properties are
-translated into 'width' and 'height' descriptors, setting the
-'min-width'/'min-height' value to ''extend-to-zoom'' and the
-'max-width'/'max-height' value to the length from the
-viewport <META> property as follows:
-
-
- -
- Non-negative number values are translated to pixel lengths, clamped to
- the range:
[1px, 10000px]
-
- -
- Negative number values are dropped
-
- -
-
device-width
- and device-height
- translate to 100vw and 100vh respectively
-
- -
- Other keywords and unknown values translate to 1px
-
-
-
-
- Some existing UA implementations use device dimensions in CSS
- pixels, and some use the window dimensions (CSS pixels) for device-width /
- device-height. Above, we translate to 100vw / 100vh which are the window
- dimensions. The rationale is that the device dimensions would not be what
- the author intended for UAs where the window is resizable or does not fill
- the screen of the device.
-
-
-
-
- This <META> element:
-
-
- <meta name="viewport" content="width=500, height=600">
-
-
- translates into:
-
-
- @viewport {
- width: extend-to-zoom 500px;
- height: extend-to-zoom 600px;
- }
-
-
-
-For a viewport <META> element that
-translates into an ''@viewport'' rule with a non-''zoom/auto'' 'zoom'
-declaration and no 'width' declaration:
-
-
- -
- If it adds a '
height'
- descriptor, add: width: auto;
-
- -
- Otherwise, add:
width: extend-to-zoom;
-
-
-
-to the ''@viewport'' rule.
-
-
- This <META> element:
-
-
- <meta name="viewport" content="initial-scale=1.0">
-
-
- translates into:
-
-
- @viewport {
- zoom: 1.0;
- width: extend-to-zoom;
- }
-
-
-
-
- This <META> element:
-
-
- <meta name="viewport" content="initial-scale=2.0,
- height=device-width">
-
-
- translates into:
-
-
- @viewport {
- zoom: 2.0;
- width: auto;
- height: extend-to-zoom 100%;
- }
-
-
-
-
-The initial-scale, minimum-scale, and maximum-scale properties
-
-The properties are translated into
-'zoom',
-'min-zoom',
-and 'max-zoom'
-respectively with the following translations of values.
-
-
- -
- Non-negative number values are translated to <number> values,
- clamped to the range
[0.1, 10]
-
- -
- Negative number values are dropped
-
- -
-
yes is translated to 1
-
- -
-
device-width
- and device-height
- are translated to 10
-
- -
-
no and unknown values are
- translated to 0.1
-
-
-
-For a viewport <META> element that translates
-into an ''@viewport'' rule with no 'max-zoom' declaration and a
-non-auto 'min-zoom' value that is larger than the 'max-zoom' value of
-the UA stylesheet, the 'min-zoom' declaration value is clamped to the
-UA stylesheet 'max-zoom' value.
-
-
-The user-scalable property
-
-The user-scalable property is translated into
-'user-zoom' with the following value translations.
-
-
- -
-
yes and no are
- translated into ''zoom'' and ''fixed'' respectively.
-
- -
- Numbers ≥ 1, numbers ≤ -1,
device-width
- and device-height are mapped to ''zoom''
-
- -
- Numbers in the range
<-1, 1>, and unknown values,
- are mapped to ''fixed''
-
-
-
-
- This <META> element:
-
-
- <meta name="viewport" content="width=480, initial-scale=2.0, user-scalable=1">
-
-
- will translate into this ''@viewport'' block:
-
-
- @viewport {
- width: 480px;
- zoom: 2.0;
- user-zoom: zoom;
- }
-
-
-
-
-Handling ''zoom/auto'' for 'zoom'
-
-This section is not normative.
-
-This section presents one way of picking an actual value for the
-'zoom' descriptor when the used value is ''zoom/auto''.
-
-Given an ''initial viewport'' with size (initial-width,
-initial-height), and a finite region within the
-canvas
-where the formatting structure is rendered (rendered-width,
-rendered-height). That region is at least as large as the
-''actual viewport''.
-
-Then, if the used value of 'zoom' is ''zoom/auto'', let the actual zoom factor be:
-
-
- zoom = MAX(initial-width / rendered-width, initial-height / rendered-height)
-
-
-The actual zoom factor should also be further limited by the
-[min-zoom, max-zoom] range.
-
-
-UA stylesheets
-
-This section is informative
-
-Traditional user agents, used mostly on desktop and laptop computers, can
-easily be resized to fit most websites inside the initial viewport without
-breaking the layout. Using the recommendations below, sites not adding any
-''@viewport'' rules themselves will continue to look and function like
-they always have.
-
-
-Large screen UA styles
-
-If a user agent has an initial viewport size large enough to fit common documents without breaking the layout,
-or which can easily to resized to do so,
-the recommendation is to have no UA styles.
-That means that it will have all descriptors initially set to ''viewport-length/auto'',
-and behave as it would have without support for viewport descriptors.
-
-If a user agent supports changing orientation,
-and the landscape mode's size fits common documents as described above
-but the portrait mode's size does not,
-it is recommended to set a minimum layout width
-equal to that of the width in landscape mode.
-
-
-
- @viewport {
- min-width: 1024px;
- }
-
-
-
-
-Small screen UA styles
-
-For smaller screen UAs, the UA could set the minimum viewport width to
-typically used as an initial viewport width of a traditional user
-agent (as described above).
-
-
-
- @viewport {
- min-width: 980px;
- }
-
-
-
-It is recommended that limitations in zooming capabilities are not
-reflected in the UA styles but rather only affect the used values for
-zoom. The min-zoom/max-zoom UA styles mentioned in
-the Viewport META section are there to
-give an accurate description of how the Safari browser behaves, not as
-part of a recommended UA stylesheet.
+Issue: Specify extend-to-zoom behavior by the viewport meta tag
{
@@ -1518,9 +281,9 @@ This appendix describes changes from the
- Made various editorial improvements and clarifications.
-
- Added OM Interfaces.
+
- Added OM Interfaces.
- Added semi-colon as separator in meta viewport.
-
- Created UA stylesheets section.
+
- Created UA stylesheets section.
- Added recommendation for when to respect orientation property.
- Dropped support for the resolution descriptor.
- Decouple width/height and zoom, introducing ''extend-to-zoom'' value for meta viewport translation.
@@ -1529,4 +292,5 @@ This appendix describes changes from the
- Removed support for device-width/height.
- Apply @viewport to top level document only.
- Extend [[!CSS3-CONDITIONAL]] rather than CSS21 for nesting in @media.
+
- Removed @viewport