Android API Guides web App-------------targeting Screens from web Apps (screen fit)

If you design and develop a web app on an Android device, you should consider the display of Web pages on different screens. Because Android has many different types of phone screens, you should consider the factors that affect the display of Web pages on Android devices.

Note: The following features described in this article have been supported on Android 2.0 or later versions of Android browsers (Android system default) and WebView (controls for displaying Web pages in Android). These properties may not be supported by third-party browsers. (that is to say, only to understand)

To adapt your Android device to a Web page, you should consider these two basic factors:

Window size and Web page scaling issues

When the Android browser loads the page, the default is the "Overview mode", which provides a zoom view of the Web page. You can change the default mode of the browser by setting the default size of the window (or the size of the initialization). You can also control the scale at which users scale Web pages. Users can also disable the Android browser's "Overview mode" in the browser settings, so don't assume that the Web page will always load in "Overview mode". So you should go to customize the size of the window and the scale of the page to replace it.

However, when the page is loaded in the WebView control, it is the size of the original page loaded (not loaded in overview mode). Therefore, it shows the default size of the page, not the page after zooming. (This is also the question of how to display a Web page after the user disables "overview mode").

Screen density of the device

The density of the Android device quotient (the number of pixels per inch) determines the size of the page display. (Screen density classification: Low, Medium, high). Android browsers and WebView can scale to make up for the difference in pixel density on different phone screens, so that all pages look the same on all devices. If a picture is an important constituent element in your web design, you should pay particular attention to the web's scaling on different devices. Because pictures can be distorted.

In order to achieve the best visual effects on different devices, you should control the scaling ratio by providing metadata that shows the screen density of the web pages and pictures of different resolutions for different screen densities, making them suitable for different screens using CSS or JavaScript.

The remainder of this article describes how to interpret these effects and provide a good design on different devices.

Using Viewport Metadata

A window is a range of areas that the page displays. Although the window's display area matches the screen size, the window also has its own size, depending on the number of pixels that are displayed on the page. Therefore, when the original size of the page is larger than the screen size, the number of pixels in the page is defined by the size of the window, not the size of the device screen. For example, there is a phone screen with a width of 480 pixels and a window with a width of 800 pixels, so the page is designed to be 800 pixels full on the screen.

(Self-understanding: It is easy to understand that the size of the window control to display the page is determined by the size of the screen, and the window has its own size to display the maximum page pixels, such as in this window can display a 800-pixel page, the page is designed to 800 pixels, the full display, This window you can understand as the picture, the picture looks the same size, but their pixels may not be the same, that is the meaning.

You can define the properties of the window in the <meta> tab of the HTML page (which must be placed in the

For example, in the following paragraph from the HTML code, it sets the window size exactly matches the width of the device screen, and the zoom function is disabled.

Here is an example demonstration of two window properties, which shows all the properties supported by the window and gives all the property values for each property:

<meta name= "viewport"       content= "           height = [Pixel_value | device-height],          width = [Pixel_value | Device-width],           initial-scale = float_value,           minimum-scale = float_value,           maximum-scale = Float_value, 
   user-scalable = [yes | no],           target-densitydpi = [Dpi_value | device-dpi |                                high-dpi | medium-dpi | LOW-DPI]          "/>

The following section discusses how to use each property, and what each property value does.
Defining the viewport size (set window size)
The height and Width properties of the view allow you to specify the size of the window (set the number of pixels to display the page before it is displayed on the screen).

The Android browser loading page mentioned above is the default use of "Overview mode" (unless the user is disabled), the minimum value of the window setting for this mode is 800 pixels. So if your page is set to a page size of 320 pixels, it looks smaller on the screen (even if the physical window of the screen is 320 pixels, because the window that displays the page simulates a range of 800 pixel widths), just like Figure I.
So to avoid this, you should explicitly specify that your window size exactly matches the size of the page you are designing.
For example, if your page is designed to be 320 pixels wide, your window should also be designed to be 320 pixels in width.
<meta name= "viewport" content= "width=320"/>
With this set up, your page will fit exactly the width of your screen, because your page and window are the same pixels.
Note: If the width value is greater than 10000, it is ignored and the width is set to the width of the device (discussed below) if it is smaller than 320 or equal to 320. The height of the value greater than 10000 or drizzle 200 will be ignored.
The following shows how this property affects the size of the page, and a Web page with a picture of 320 small Su-width is shown in Figure two, but the window is set to a width of 400 pixels

Note: If you set the width of the window to match the width of your Web page, the screen width of the device does not match these, and these pages will still fit on those screens, even if the screen resolution of these devices is high or low.
Because Android browsers and WebView will default to the size of the page that they think fits the current screen (a medium-density screen in the picture). (as you can see in Figure II, the HDIP device is in contrast to the MDIP device).
The screen density will be discussed more in defining the viewport target density.
Automatic Sizing
You can use this method instead of setting the window size pixels. You can set the value of the height and width property of the window to Device-height anddevice-width，来使窗口去适配设备屏幕的大小。当你开发的webapp的宽度是变化的（不是固定的），使用这种方法是合适的，除了宽度是固定的显示以外（把页面的宽度设置成适配每一个屏幕大小的）。
例如：
<meta name= "viewport" content= "Width=device-width"/>
The result is that whatever your current screen is, the window will match those screens, as shown in 3. It is important to note that when the current device (if you do not specify a medium density device in the picture) does not match the target density, the image automatically zooms to match the device screen. In three, pictures displayed on high-density devices, in order to fit the medium density of the device, the picture was scaled up.
Note: If you want to use Device-width anddevice-height去适配每个设备的密度，而不是去缩放web页面，你必须还要使用target-densitydpi这个属性和他的device-dpi这个值。这将在Defining the viewport density.中进行更多的讨论。
Defining the viewport scale
窗口的比例规定了web页面的缩放，下面的窗口属性允许你去设定页面的比例：
Initial-scale
The initial scale of the page. This web page is a float value relative to the magnification of your screen size. For example, if you set the value of Initial-scale to "1.0", then the Web page will be scaled to match the 1:1 of your target density, and if set to 2.0, the page would be twice times larger.
The default initial scale is the size of the page that calculates the matching window. Because the default window width is 800 pixels, if the screen resolution is less than 800 pixels wide, how this initialization scale is about 1.0 smaller. The default is for a 800 pixel fit on the screen.
Minimum-scale
The minimum allowable scale. is a float relative to the minimum zoom factor for the current screen size. For example, if you set it to "1.0", the Web page will not shrink because his minimum ratio is 1:1.
Maximum-scale
The maximum allowable scale. The maximum zoom factor relative to the current screen size is a float. For example, if you set it to "2.0", you can't be bigger than twice times.
User-scalable
Users are free to zoom in or out of the page. Set to "Yes" allows, "no" is forbidden. The default is "Yes". If you set it to "no", Minimum-scale andmaximum-scale将是被忽略的，因为他们不可用了。
所有的比例的范围是0.01–10。
实例：
<meta name= "viewport" content= "initial-scale=1.0"/>
This data represents the full size of the set that is relative to the target pixel.
Defining the viewport target density (set window density)
The density of the device is based on the resolution of the device screen, which is defined as the pixel dots per inch (dpi). Android supports three different types of screen densities: Low (LDPI), Medium (MDPI), and High (hdpi). Low-density screens have fewer pixels per inch, while high-density screens have more pixels (compared to a medium-density screen). The default edging pixels for Android browsers and WebView are medium pixels.
Because the default target pixels are medium pixels, when users have a high-pixel or low-pixel phone device, the Android browser and WebView zoom the page so that their display size matches the medium-pixel screen, making it appear as if it were on a medium screen. More accurately, Android browsers and WebView are about 1.5 times times larger on high-pixel devices (because his screen pixels are smaller), about 0.75 times times the original on low pixels (because his screen pixels are larger).
Because of the default scaling, the example shown in figure two and figure III, the Web page is displayed on a high-pixel and medium-pixel device with the same physical size, and the default scale factor for a high-pixel device Display page is 1.5 times times the actual pixel. This may cause some problems with the display of the picture. For example, while the size of a high-density device and a medium-density device slice is the same, the picture is more blurry on a higher-pixel device because the picture is only 320 pixels wide, but the pixel width he is drawing is 480 pixels.
You can change the density of the target screen by using the Target-densitydpi window property in your Web page. His attribute values are as follows:
DEVICE-DPI uses the device's own dpi as the target pixel, and no scaling occurs by default.
HIGH-DPI uses hdpi as the target pixel. Both medium and low-pixel screens are scaled down to the appropriate size.
MEDIUM-DPI uses MDPI as the target pixel. The high-pixel screen zooms in and the low-pixel screen shrinks. This is the default target pixel.
LOW-DPI uses ldpi as the target pixel. Both the high-pixel screen and the mid-pixel screen are zoomed in to the appropriate size.
<value> Specifies the pixel value as the target pixel. The range of values is at 70-400.
For example, to prevent the Android browser and WebView from going to a different screen to zoom in on the Web page, set the target-densitydpi value to device-dpi. If you do this, the page will not scale. Conversely, the display of the current page is matched to the current screen density. Therefore, you should design your window width to match the width of your device so that your Web page naturally fits your screen.
For example:
<meta name= "viewport" content= "target-densitydpi=device-dpi, Width=device-width"/>

The Web pages shown in Figure IV Use these window properties. displayed on high-density devices is relatively small. Because his actual pixels are relatively small compared to medium density devices, no expansion occurs. On both devices, this 320-pixel-wide photo is painted with 320 pixels. (This is how you define your window, when you define your Web page with JS and CSS based on your screen density and the image resources that provide different pixel densities.)
Targeting device Density with CSS (true for equipment density using CSS)
The features of the Android browser and WebView support CSS, that is, the-webkit-device-pixel-ratio CSS media, which allows a specific CSS style to be created on a particular screen, his attribute values are "0.75", "1.0" and "1.5" Used to represent low-density, medium-density, and high-density CSS styles.
For example, you can create different style sheets for different densities:
<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 "/> <link rel=" stylesheet "media= "Screen and (-webkit-device-pixel-ratio:0.75)" href= "Ldpi.css"/>
Or specify a different style style in the same style sheet:
#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);}    }
The default style for #header on medium devices is to support the normal operation of version 2.0, as they do not support the-webkit-device-pixel-ratio media feature.
Depending on the density of the screen, you can adjust the type of the style by setting the properties of the window. In order to provide a completely personalized style to your Web page for the different densities supported, you should set the properties of the window so that the window width and density match the device. As below:
<meta name= "viewport" content= "target-densitydpi=device-dpi, Width=device-width"/>

With this setting, the Android browser and WebView cannot scale the page and the width of the window matches the screen width exactly. The resulting properties of these windows are shown in effect four. However, by -webkit-device-pixel-ratio adding some custom CSS with the media attribute, you can apply different styles. For example, the Web page shown in Figure 5 is a high-pixel image that is raised on a high-pixel device by setting the window properties and adding CSS.
Targeting Device Density with JavaScript
Android browsing and WebView support a DOM property that allows querying the current device density-------window.devicepixelratio DOM properties. The value of this property is the scale multiplier of the current device. For example, when the value of Window.devicepixelratio equals "1.0", the device that is considered medium density is not scaled by the current device, and if the value equals "1.5", the device is considered a high-density device and the page is magnified 1.5 times times by default, and if the value is "0.75", The device is considered a low-density device and is scaled by 0.75 times times by default. The scaling of Android browser and WebView is based on the target pixel of the page----This defining the viewport target density, this piece of clothing to do the description, the default density is medium density, But you can change the target density to affect how your Web pages are scaled on different screens.
example, you can use JS to query the density of the device:
if (Window.devicepixelratio = = 1.5) {  alert ("This was a high-density screen");} else if (Window.devicepixelratio = = 0.75) {alert ("This was a low-density screen");}

Android API Guides web App-------------targeting Screens from web Apps (screen fit)