[null,null,["上次更新時間：2025-07-27 (世界標準時間)。"],[],[],null,["# Support different screens in web apps\n\nBecause Android is available on devices with a variety of screen sizes and pixel densities,\naccount for these factors in your web design so that your pages are appropriately sized.\n[`WebView`](/reference/android/webkit/WebView) supports DOM, CSS, and meta tag\nfeatures to help you render your web content appropriately.\n\nWhen targeting your web pages for Android-powered devices, there are two major factors to account\nfor:\n\n[The viewport](#Viewport)\n: The viewport is the rectangular area that provides a drawable region for your web page. You\n can specify several viewport properties, such as its size and initial scale. Most important is the\n viewport width, which defines the total number of horizontal pixels available from the web page's\n point of view---the number of CSS pixels available.\n\n[The screen density](#DensityCSS)\n: The `WebView` class and most web browsers on Android convert your CSS pixel values\n to density-independent pixel values, so your web page appears at the same perceivable size as a\n medium-density screen---about 160 dpi. However, if graphics are an important element of your\n web design, pay attention to the scaling that occurs on different densities. For example, an image\n that is 300 px wide on a 320 dpi screen is scaled up---it uses more physical pixels per CSS\n pixel. This can produce artifacts like blurring and pixelation. For simplicity, Android collapses\n most smaller screen densities into a few general categories: small, medium, and large. To learn\n more about screen density, read\n [Support different pixel densities](/training/multiscreen/screendensities).\n\nRefer to the following related resources:\n\n- [Pixel-Perfect UI in the WebView](https://developers.google.com/chrome/mobile/docs/webview/pixelperfect)\n- [Learn\n Responsive Design](http://www.html5rocks.com/en/mobile/responsivedesign/)\n- [High\n DPI images for variable pixel densities](http://www.html5rocks.com/en/mobile/high-dpi/)\n\nSpecify viewport properties\n---------------------------\n\nThe viewport is the area in which your web page is drawn. Although the viewport's total visible\narea matches the size of the screen when zoomed all the way out, the viewport has its own pixel\ndimensions that it makes available to a web page. For example, although a device screen might have\na physical width of 480 pixels, the viewport can have a width of 800 pixels. This lets a web page\ndesigned at 800 pixels wide be completely visible on the screen when the viewport scale is 1.0.\n\nMost\nweb browsers on Android---including Chrome---set the viewport to a large size by default.\nThis _wide viewport mode_ is about 980 px wide. Many browsers also zoom out as far as\npossible by default to show the full viewport width, known as _overview mode_.\n| **Note:** When your page is rendered in a `WebView`, it doesn't use wide viewport mode by default. You can enable wide viewport mode with [setUseWideViewPort()](/reference/android/webkit/WebSettings#setUseWideViewPort(boolean)).\n\nYou can define properties of the viewport for your web page, such as the width and initial zoom\nlevel, using the `\u003cmeta name=\"viewport\" ...\u003e` tag in your document\n`\u003chead\u003e`.\n\nThe following syntax shows all the supported viewport properties and the types of values\naccepted by each one: \n\n```xml\n\u003cmeta name=\"viewport\"\n content=\"\n height = [pixel_value | \"device-height\"] ,\n width = [pixel_value | \"device-width\"] ,\n initial-scale = float_value ,\n minimum-scale = float_value ,\n maximum-scale = float_value ,\n user-scalable = [\"yes\" | \"no\"]\n \" /\u003e\n```\n\nFor example, the following `\u003cmeta\u003e` tag specifies that the viewport width matches\nthe device screen's width and that the ability to zoom is disabled: \n\n```xml\n\u003chead\u003e\n \u003ctitle\u003eExample\u003c/title\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, user-scalable=no\" /\u003e\n\u003c/head\u003e\n```\n\nWhen optimizing your site for mobile devices, you usually set the width to\n`\"device-width\"` so the size fits exactly on all devices, then use CSS media queries to\nflexibly adapt layouts to suit different screen sizes.\n| **Note:** Disable user scaling only when you're certain that your web page layout is flexible and the content fits the width of small screens.\n\nTarget device density with CSS\n------------------------------\n\n`WebView` supports `-webkit-device-pixel-ratio`, which is a CSS media\nfeature that lets you create styles for specific screen densities. The value you apply to this\nfeature must be 0.75, 1, or 1.5, to indicate that the styles are for devices with low-, medium-, or\nhigh-density screens, respectively.\n\nYou can create separate stylesheets for each density: \n\n```xml\n\u003clink rel=\"stylesheet\" media=\"screen and (-webkit-device-pixel-ratio: 1.5)\" href=\"hdpi.css\" /\u003e\n\u003clink rel=\"stylesheet\" media=\"screen and (-webkit-device-pixel-ratio: 1.0)\" href=\"mdpi.css\" /\u003e\n```\n\nOr specify the different styles in one stylesheet: \n\n```\n#header {\n background:url(medium-density-image.png);\n}\n\n@media screen and (-webkit-device-pixel-ratio: 1.5) {\n /* CSS for high-density screens */\n #header {\n background:url(high-density-image.png);\n }\n}\n\n@media screen and (-webkit-device-pixel-ratio: 0.75) {\n /* CSS for low-density screens */\n #header {\n background:url(low-density-image.png);\n }\n}\n```\n\nFor more information about handling different screen densities, especially images, see\n[High DPI images for\nvariable pixel densities](http://www.html5rocks.com/en/mobile/high-dpi/).\n\nTarget device density with JavaScript\n-------------------------------------\n\n`WebView` supports `window.devicePixelRatio`, which is a DOM property that\nlets you query the density of the current device. The value of this property specifies the scaling\nfactor used for the current device. If the value of `window.devicePixelRatio` is 1.0,\nthen the device is considered a medium-density device, and no scaling is applied by default. If the\nvalue is 1.5, then the device is considered a high-density device, and the page is scaled 1.5x by\ndefault. If the value is 0.75, then the device is considered a low-density device, and the page is\nscaled 0.75x by default.\n\nThe scaling that the Android browser and `WebView` apply is based on the web page's\ntarget density. As described in the section [defining the viewport\ntarget density](#ViewportDensity), the default target is medium-density, but you can change the target to affect\nhow your web page is scaled for different screen densities.\n\nFor example, here's how you can query the device density with JavaScript: \n\n```javascript\nif (window.devicePixelRatio == 1.5) {\n alert(\"This is a high-density screen\");\n} else if (window.devicePixelRatio == 0.75) {\n alert(\"This is a low-density screen\");\n}\n```"]]
