Skip to content

Commit 281959c

Browse files
ChumpChiefChumpChief
committed
[css-device-adapt] Editorial updates to introduction, add fully responsive and partially responsive examples
1 parent 8bcd1a7 commit 281959c

1 file changed

Lines changed: 80 additions & 25 deletions

File tree

‎css-device-adapt/Overview.bs‎

Lines changed: 80 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -28,32 +28,28 @@ CSS 2.1 [[!CSS21]] specifies an
2828
<a href="https://www.w3.org/TR/CSS21/visudet.html#containing-block-details">
2929
initial containing block</a> for continuous media that has the dimensions
3030
of the <a href="https://www.w3.org/TR/CSS21/visuren.html#viewport">
31-
viewport</a>. Mobile/handheld device browsers have a viewport that is
32-
generally a lot narrower than a desktop browser window at a zoom level
33-
that gives a CSS pixel size
31+
viewport</a>. Since the viewport is generally no larger than the display,
32+
devices with smaller displays such as phones or tablets typically present
33+
a smaller viewport than larger devices like desktop or laptops.
34+
35+
Unfortunately, many documents have historically been designed against larger
36+
viewports and exhibit a variety of bugs when viewed in smaller viewports.
37+
These include unintended layout wrapping, clipped content, awkward scrollable
38+
bounds, and script errors. To avoid these issues, mobile browsers generally
39+
use a fixed initial containing block width that mimics common desktop browser
40+
window size (typically 980-1024px). The resulting layout is then scaled down
41+
to fit in the available screen space.
42+
43+
Although this approach mitigates the issues mentioned above, the downscaling
44+
means the CSS pixel size will be smaller than
3445
<a href="https://www.w3.org/TR/CSS21/syndata.html#length-units">recommended</a>
35-
by CSS 2.1.
36-
37-
The narrow viewport is a problem for documents designed to look good in
38-
desktop browsers. The result is that mobile browser vendors use a fixed
39-
initial containing block size that is different from the viewport size,
40-
and close to that of a typical desktop browser window. In addition to
41-
scrolling or panning, zooming is often used to change between an overview
42-
of the document and zoom in on particular areas of the document to read
43-
and interact with.
44-
45-
Certain DOCTYPEs (for instance XHTML Mobile Profile) are used to recognize
46-
mobile documents which are assumed to be designed for handheld devices,
47-
hence using the viewport size as the initial containing block size.
48-
49-
Additionally, an HTML <code class=html>&lt;META&gt;</code> tag has been
50-
introduced for allowing an author to specify the size of the initial
51-
containing block, and the initial zoom factor directly. It was first
52-
implemented by Apple for the Safari/iPhone browser, but has since been
53-
implemented for the Opera, Android, and Fennec browsers. These
54-
implementations are not fully interoperable and this specification is
55-
an attempt at standardizing the functionality provided by the
56-
viewport <code class=html>&lt;META&gt;</code> tag in CSS.
46+
by CSS 2.1. Users will likely need to zoom on the content to view it
47+
comfortably.
48+
49+
This mitigation is unneccessary for sites that have been designed to work
50+
well on small viewports. This specification describes the CSS
51+
<code class=css>@viewport</code> rule which allows authors to control and
52+
opt-out of this behavior.
5753

5854
Issue: This specification is written from an implementation centric point of view,
5955
making it arguably difficult to read.
@@ -66,6 +62,65 @@ for a good discussion of these issues.
6662
Issue: Various issues about this specification and related specifications
6763
are listed in <a href="https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Investigation_of_APIs_for_Level_of_detail#The_issues_on_existing_APIs">this report</a>.
6864

65+
<h2 id="scenarios">
66+
Motivating Scenarios</h2>
67+
68+
<div class="example">
69+
In this example, the document can be rendered without issue with any
70+
size viewport. The author indicates this using the
71+
<code class=css>@viewport</code> rule.
72+
73+
<pre class="lang-html">
74+
&lt;!doctype html>
75+
&lt;html>
76+
&lt;head>
77+
&lt;title>My Site&lt;/title>
78+
&lt;style>
79+
@viewport { width: auto; }
80+
&lt;/style>
81+
&lt;/head>
82+
&lt;body>
83+
Since this document is just some simple text, it can be rendered
84+
at any width without issue. The text will just re-wrap as needed
85+
when viewed in a smaller viewport.
86+
&lt;/body>
87+
&lt;/html>
88+
</pre>
89+
</div>
90+
91+
<div class="example">
92+
In this example, the document can be rendered without issue for viewports
93+
down to 384px, but smaller sizes would clip the diagram. The author
94+
indicates this using the <code class=css>@viewport</code> rule in
95+
combination with a media query. When the viewport would be smaller than
96+
384px, the user agent will select 384px as the initial containing block
97+
size and scale the resulting layout down to fit the available space.
98+
99+
<pre class="lang-html">
100+
&lt;!doctype html>
101+
&lt;html>
102+
&lt;head>
103+
&lt;style>
104+
@viewport { width: auto; }
105+
@media (max-width: 384px) {
106+
@viewport { width: 384px; }
107+
}
108+
body {
109+
margin: 0;
110+
}
111+
img {
112+
min-width: 384px;
113+
}
114+
&lt;/style>
115+
&lt;title>My Other Site&lt;/title>
116+
&lt;/head>
117+
&lt;body>
118+
&lt;img src="diagram.png">
119+
&lt;/body>
120+
&lt;/html>
121+
</pre>
122+
</div>
123+
69124
<h2 id="values">
70125
Values</h2>
71126

0 commit comments

Comments
 (0)