1 page.title=Supporting Different Screens in Web Apps 2 @jd:body 3 4 <div id="qv-wrapper"> 5 <div id="qv"> 6 <h2>In this document</h2> 7 <ol> 8 <li><a href="#Metadata">Using Viewport Metadata</a> 9 <ol> 10 <li><a href="#ViewportSize">Defining the viewport size</a></li> 11 <li><a href="#ViewportScale">Defining the viewport scale</a></li> 12 <li><a href="#ViewportDensity">Defining the viewport target density</a></li> 13 </ol> 14 </li> 15 <li><a href="#DensityCSS">Targeting Device Density with CSS</a></li> 16 <li><a href="#DensityJS">targeting Device Density with JavaScript</a></li> 17 </ol> 18 19 <h2>See also</h2> 20 <ul> 21 <li><a href="https://developers.google.com/chrome/mobile/docs/webview/pixelperfect" 22 >Pixel-Perfect UI in the WebView</a></li> 23 <li><a href="http://www.html5rocks.com/en/mobile/responsivedesign/" class="external-link">Creating 24 a Mobile-First Responsive Web Design</a></li> 25 <li><a href="http://www.html5rocks.com/en/mobile/high-dpi/" class="external-link">High 26 DPI Images for Variable Pixel Densities</a></li> 27 </ul> 28 29 </div> 30 </div> 31 32 33 <p>Because Android is available on devices with a variety of screen sizes and pixel densities, you 34 should account for these factors in your web design so your web pages always appear at the 35 appropriate size.</p> 36 37 38 <p>When targeting your web pages for Android devices, there are two major factors that you 39 should account for:</p> 40 41 <dl> 42 <dt><a href="#Viewport">The viewport</a></dt> 43 <dd>The viewport is the rectangular area that provides a drawable region for your web page. 44 You can specify several viewport properties, such as its size and initial scale. Most important 45 is the view port width, which defines the total number of horizontal pixels available from the web page's point of 46 view (the number of CSS pixels available). 47 </dd> 48 49 <dt><a href="#DensityCSS">The screen density</a></dt> 50 <dd>The {@link android.webkit.WebView} class and most web browsers on Android convert your CSS 51 pixel values to density-independent pixel values, so your web page appears at the same perceivable 52 size as a medium-density screen (about 160dpi). However, if graphics are an important element of 53 your web design, you should pay close attention to the scaling that occurs on different densities, 54 because a 300px-wide image on a 320dpi screen will be scaled up (using more physical pixels per CSS 55 pixel), which can produce artifacts (blurring and pixelation).</dd> 56 57 </dl> 58 59 60 61 62 63 <h2 id="Viewport">Specifying Viewport Properties</h2> 64 65 <p>The viewport is the area in which your web page is drawn. Although the viewport's total visible 66 area matches the size of the screen when zoomed all the way out, the viewport has its own pixel 67 dimensions that it makes available to a web page. For example, although a device screen might 68 have physical a width 69 of 480 pixels, the viewport can have a width of 800 pixels. This allows a web page designed at 800 70 pixels wide to be completely visible on the screen when the viewport scale is 1.0. Most web browsers on 71 Android (including Chrome) set the viewport to a large size by default (known as "wide viewport 72 mode" at about 980px wide). Many browsers also zoom out as far as possible, by default, to 73 show the full viewport width (known as "overview mode").</p> 74 75 <p class="note"><strong>Note:</strong> 76 When your page is rendered in a {@link android.webkit.WebView}, it does not use wide viewport mode 77 (the page appears at full zoom) by default. You can enable wide viewport mode 78 with {@link android.webkit.WebSettings#setUseWideViewPort setUseWideViewPort()}.</p> 79 80 <p>You can define properties of the viewport for your web page, such as the width and initial zoom 81 level, using the {@code <meta name="viewport" ...>} tag in your document 82 {@code <head>}.</p> 83 84 <p>The following syntax shows all of the 85 supported viewport properties and the types of values accepted by each one:</p> 86 87 <pre> 88 <meta name="viewport" 89 content=" 90 <b>height</b> = [<em>pixel_value</em> | "device-height"] , 91 <b>width</b> = [<em>pixel_value</em> | "device-width"] , 92 <b>initial-scale</b> = <em>float_value</em> , 93 <b>minimum-scale</b> = <em>float_value</em> , 94 <b>maximum-scale</b> = <em>float_value</em> , 95 <b>user-scalable</b> = ["yes" | "no"] 96 " /> 97 </pre> 98 99 <p>For example, the following {@code <meta>} tag specifies that the viewport width 100 should exactly match the device screen's width and that the ability to zoom should be disabled:</p> 101 102 <pre> 103 <head> 104 <title>Example</title> 105 <meta name="viewport" content="width=device-width, user-scalable=no" /> 106 </head> 107 </pre> 108 109 110 <p>When optimizing your site for mobile devices, you should usually set the width to 111 {@code "device-width"} so the size fits exactly on all devices, then use CSS media queries to 112 flexibly adapt layouts to suit different screen sizes. 113 114 <p class="note"><strong>Note:</strong> You should disable user scaling only when you're certain 115 that your web page layout is flexible and the content will fit the width of small screens.</p> 116 117 118 119 120 121 122 <h2 id="DensityCSS">Targeting Device Density with CSS</h2> 123 124 <p>The Android Browser and {@link android.webkit.WebView} support a CSS media feature that allows 125 you to create styles for specific 126 screen densities—the <code>-webkit-device-pixel-ratio</code> CSS media feature. The 127 value you apply to this feature should be either 128 "0.75", "1", or "1.5", to indicate that the styles are for devices with low density, medium density, 129 or high density screens, respectively.</p> 130 131 <p>For example, you can create separate stylesheets for each density:</p> 132 133 <pre> 134 <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" /> 135 <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" /> 136 </pre> 137 138 139 <p>Or, specify the different styles in one stylesheet:</p> 140 141 <pre class="no-pretty-print"> 142 #header { 143 background:url(medium-density-image.png); 144 } 145 146 @media screen and (-webkit-device-pixel-ratio: 1.5) { 147 /* CSS for high-density screens */ 148 #header { 149 background:url(high-density-image.png); 150 } 151 } 152 153 @media screen and (-webkit-device-pixel-ratio: 0.75) { 154 /* CSS for low-density screens */ 155 #header { 156 background:url(low-density-image.png); 157 } 158 } 159 </pre> 160 161 162 <p>For more information about handling different screen densities, especially images, see 163 <a href="http://www.html5rocks.com/en/mobile/high-dpi/" class="external-link">High 164 DPI Images for Variable Pixel Densities</a>.</li> 165 166 167 <h2 id="DensityJS">Targeting Device Density with JavaScript</h2> 168 169 <p>The Android Browser and {@link android.webkit.WebView} support a DOM property that allows you to 170 query the density of the current 171 device—the <code>window.devicePixelRatio</code> DOM property. The value of this property 172 specifies the scaling factor used for the current device. For example, if the value 173 of <code>window.devicePixelRatio</code> is "1.0", then the device is considered a medium density 174 device and no scaling is applied by default; if the value is "1.5", then the device is 175 considered a high density device and the page is scaled 1.5x by default; if the value 176 is "0.75", then the device is considered a low density device and the page is scaled 177 0.75x by default. Of course, the scaling that the Android Browser and {@link android.webkit.WebView} 178 apply is based on the web page's 179 target density—as described in the section about <a href="#ViewportDensity">Defining the 180 viewport target density</a>, the default target is medium-density, but you can change the 181 target to affect how your web page is scaled for different screen densities.</p> 182 183 <p>For example, here's how you can query the device density with JavaScript:</p> 184 185 <pre> 186 if (window.devicePixelRatio == 1.5) { 187 alert("This is a high-density screen"); 188 } else if (window.devicePixelRatio == 0.75) { 189 alert("This is a low-density screen"); 190 } 191 </pre> 192 193 194
