remove the overview page, remove a bunch of stuff from the doc about screens and refer to external docs instead, and add tips about debugging on 4.4 w/ dev tools. Change-Id: I1fadb7cdf6fee469dc41a1f4e2dc2daf1fde52d1
194 lines
7.8 KiB
Plaintext
194 lines
7.8 KiB
Plaintext
page.title=Supporting Different Screens in Web Apps
|
|
@jd:body
|
|
|
|
<div id="qv-wrapper">
|
|
<div id="qv">
|
|
<h2>In this document</h2>
|
|
<ol>
|
|
<li><a href="#Metadata">Using Viewport Metadata</a>
|
|
<ol>
|
|
<li><a href="#ViewportSize">Defining the viewport size</a></li>
|
|
<li><a href="#ViewportScale">Defining the viewport scale</a></li>
|
|
<li><a href="#ViewportDensity">Defining the viewport target density</a></li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#DensityCSS">Targeting Device Density with CSS</a></li>
|
|
<li><a href="#DensityJS">targeting Device Density with JavaScript</a></li>
|
|
</ol>
|
|
|
|
<h2>See also</h2>
|
|
<ul>
|
|
<li><a href="https://developers.google.com/chrome/mobile/docs/webview/pixelperfect"
|
|
>Pixel-Perfect UI in the WebView</a></li>
|
|
<li><a href="http://www.html5rocks.com/en/mobile/responsivedesign/" class="external-link">Creating
|
|
a Mobile-First Responsive Web Design</a></li>
|
|
<li><a href="http://www.html5rocks.com/en/mobile/high-dpi/" class="external-link">High
|
|
DPI Images for Variable Pixel Densities</a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<p>Because Android is available on devices with a variety of screen sizes and pixel densities, you
|
|
should account for these factors in your web design so your web pages always appear at the
|
|
appropriate size.</p>
|
|
|
|
|
|
<p>When targeting your web pages for Android devices, there are two major factors that you
|
|
should account for:</p>
|
|
|
|
<dl>
|
|
<dt><a href="#Viewport">The viewport</a></dt>
|
|
<dd>The viewport is the rectangular area that provides a drawable region for your web page.
|
|
You can specify several viewport properties, such as its size and initial scale. Most important
|
|
is the view port width, which defines the total number of horizontal pixels available from the web page's point of
|
|
view (the number of CSS pixels available).
|
|
</dd>
|
|
|
|
<dt><a href="#DensityCSS">The screen density</a></dt>
|
|
<dd>The {@link android.webkit.WebView} class and most web browsers on Android convert your CSS
|
|
pixel values to density-independent pixel values, so your web page appears at the same perceivable
|
|
size as a medium-density screen (about 160dpi). However, if graphics are an important element of
|
|
your web design, you should pay close attention to the scaling that occurs on different densities,
|
|
because a 300px-wide image on a 320dpi screen will be scaled up (using more physical pixels per CSS
|
|
pixel), which can produce artifacts (blurring and pixelation).</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
|
|
|
|
<h2 id="Viewport">Specifying Viewport Properties</h2>
|
|
|
|
<p>The viewport is the area in which your web page is drawn. Although the viewport's total visible
|
|
area matches the size of the screen when zoomed all the way out, the viewport has its own pixel
|
|
dimensions that it makes available to a web page. For example, although a device screen might
|
|
have physical a width
|
|
of 480 pixels, the viewport can have a width of 800 pixels. This allows a web page designed at 800
|
|
pixels wide to be completely visible on the screen when the viewport scale is 1.0. Most web browsers on
|
|
Android (including Chrome) set the viewport to a large size by default (known as "wide viewport
|
|
mode" at about 980px wide). Many browsers also zoom out as far as possible, by default, to
|
|
show the full viewport width (known as "overview mode").</p>
|
|
|
|
<p class="note"><strong>Note:</strong>
|
|
When your page is rendered in a {@link android.webkit.WebView}, it does not use wide viewport mode
|
|
(the page appears at full zoom) by default. You can enable wide viewport mode
|
|
with {@link android.webkit.WebSettings#setUseWideViewPort setUseWideViewPort()}.</p>
|
|
|
|
<p>You can define properties of the viewport for your web page, such as the width and initial zoom
|
|
level, using the {@code <meta name="viewport" ...>} tag in your document
|
|
{@code <head>}.</p>
|
|
|
|
<p>The following syntax shows all of the
|
|
supported viewport properties and the types of values accepted by each one:</p>
|
|
|
|
<pre>
|
|
<meta name="viewport"
|
|
content="
|
|
<b>height</b> = [<em>pixel_value</em> | "device-height"] ,
|
|
<b>width</b> = [<em>pixel_value</em> | "device-width"] ,
|
|
<b>initial-scale</b> = <em>float_value</em> ,
|
|
<b>minimum-scale</b> = <em>float_value</em> ,
|
|
<b>maximum-scale</b> = <em>float_value</em> ,
|
|
<b>user-scalable</b> = ["yes" | "no"]
|
|
" />
|
|
</pre>
|
|
|
|
<p>For example, the following {@code <meta>} tag specifies that the viewport width
|
|
should exactly match the device screen's width and that the ability to zoom should be disabled:</p>
|
|
|
|
<pre>
|
|
<head>
|
|
<title>Example</title>
|
|
<meta name="viewport" content="width=device-width, user-scalable=no" />
|
|
</head>
|
|
</pre>
|
|
|
|
|
|
<p>When optimizing your site for mobile devices, you should usually set the width to
|
|
{@code "device-width"} so the size fits exactly on all devices, then use CSS media queries to
|
|
flexibly adapt layouts to suit different screen sizes.
|
|
|
|
<p class="note"><strong>Note:</strong> You should disable user scaling only when you're certain
|
|
that your web page layout is flexible and the content will fit the width of small screens.</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h2 id="DensityCSS">Targeting Device Density with CSS</h2>
|
|
|
|
<p>The Android Browser and {@link android.webkit.WebView} support a CSS media feature that allows
|
|
you to create styles for specific
|
|
screen densities—the <code>-webkit-device-pixel-ratio</code> CSS media feature. The
|
|
value you apply to this feature should be either
|
|
"0.75", "1", or "1.5", to indicate that the styles are for devices with low density, medium density,
|
|
or high density screens, respectively.</p>
|
|
|
|
<p>For example, you can create separate stylesheets for each density:</p>
|
|
|
|
<pre>
|
|
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
|
|
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />
|
|
</pre>
|
|
|
|
|
|
<p>Or, specify the different styles in one stylesheet:</p>
|
|
|
|
<pre class="no-pretty-print">
|
|
#header {
|
|
background:url(medium-density-image.png);
|
|
}
|
|
|
|
@media screen and (-webkit-device-pixel-ratio: 1.5) {
|
|
/* CSS for high-density screens */
|
|
#header {
|
|
background:url(high-density-image.png);
|
|
}
|
|
}
|
|
|
|
@media screen and (-webkit-device-pixel-ratio: 0.75) {
|
|
/* CSS for low-density screens */
|
|
#header {
|
|
background:url(low-density-image.png);
|
|
}
|
|
}
|
|
</pre>
|
|
|
|
|
|
<p>For more information about handling different screen densities, especially images, see
|
|
<a href="http://www.html5rocks.com/en/mobile/high-dpi/" class="external-link">High
|
|
DPI Images for Variable Pixel Densities</a>.</li>
|
|
|
|
|
|
<h2 id="DensityJS">Targeting Device Density with JavaScript</h2>
|
|
|
|
<p>The Android Browser and {@link android.webkit.WebView} support a DOM property that allows you to
|
|
query the density of the current
|
|
device—the <code>window.devicePixelRatio</code> DOM property. The value of this property
|
|
specifies the scaling factor used for the current device. For example, if the value
|
|
of <code>window.devicePixelRatio</code> is "1.0", then the device is considered a medium density
|
|
device and no scaling is applied by default; if the value is "1.5", then the device is
|
|
considered a high density device and the page is scaled 1.5x by default; if the value
|
|
is "0.75", then the device is considered a low density device and the page is scaled
|
|
0.75x by default. Of course, the scaling that the Android Browser and {@link android.webkit.WebView}
|
|
apply is based on the web page's
|
|
target density—as described in the section about <a href="#ViewportDensity">Defining the
|
|
viewport target density</a>, the default target is medium-density, but you can change the
|
|
target to affect how your web page is scaled for different screen densities.</p>
|
|
|
|
<p>For example, here's how you can query the device density with JavaScript:</p>
|
|
|
|
<pre>
|
|
if (window.devicePixelRatio == 1.5) {
|
|
alert("This is a high-density screen");
|
|
} else if (window.devicePixelRatio == 0.75) {
|
|
alert("This is a low-density screen");
|
|
}
|
|
</pre>
|
|
|
|
|