Overview
You can use the metadata of viewport, CSS, and Javascript to set a suitable page for screens with different resolutions.
The technology in this document applies to Android 2.0 and later devices. It is applicable to the pages displayed in the default Android Browser and WebView.
If you are developing a Web application for Android or re-designing a Web application for mobile devices, you need to carefully consider what your page looks like on different devices. Because Android devices have different models, you need to consider some factors that affect your page display on Android devices.
Note: The features considered in this document are only Android Browser application (provided by the default Android platform) and WebView (used to display the framework toolset of web pages) in Android 2.0 and later versions) yes. Third-party browsers running on Android may not support these features to control viewport and resolution.
When designing pages for Android devices, there are two basic considerations:
Viewport size and web page size
When the Android Browser loads a page, the "overview mode" is used by default to provide a enlarged page. You can rewrite this line by defining the default size of the viewport or the initial size of the viewport. You can also control the user's page enlargement or reduction. You can also disable overview mode in browser settings. In this case, you should not assume that your page is loaded in overview mode. Instead, you should customize the appropriate viewport size and size for your page.
However, when your page is displayed in WebView, the page is loaded in the form of Maximization (rather than "overview mode "). That is to say, it is displayed in the default page size, rather than the enlarged page (even if the user shields the overview mode, the page is displayed as well ).
Device screen resolution
The screen resolution of Android devices affects the resolution and size of web pages. (Three screen resolutions are available: low, medium, and high .) The Android browser and WebView adjust the page size to adapt to different screen resolutions. In this way, all devices display the webpage based on the default size, that is, the Medium Resolution. If images are an important part of your web page, you need to pay close attention to the scaling in different resolutions, because image scaling may cause blurred and pixel problems.
To provide the best visual effects at all resolutions, you need to control the scaling by providing the viewport metadata of the target resolution of your page, CSS or Javascript is used to provide different images for different resolutions.
The rest of this document describes how to consider these effects and provide a good design for different types of screens.
Use Viewport metadata
Viewport is the area used to display your page. Although the visible area of the viewport matches the screen size, it has its own size (dimensions), which determines the visible pixels on the page. That is to say, the pixel data occupied by a web page before it expands to the entire screen is defined by the viewport size (dimensions), rather than the device screen size. For example, although the screen width of a device is 480 pixels, but the viewport width is 800 pixels, the web page must be fully displayed on the screen of 800 pixels.
You can use <meta> tag (this tag must be included in For example, the following HTML snippet specifies that the viewport width must strictly match the screen width, and the zoom-in function is disabled:
<Head>
<Title> Example </title>
<Meta name = "viewport" content = "width = device-width, user-scalable = no"/>
</Head>
This is an example of defining two viewports. The following syntax shows all the supported viewport properties and basic data attributes accepted by each nature:
<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 these viewport properties and what values can be assigned to these properties.
Define the viewport size
Figure 1. A web page with an image of 320 pixels wide is displayed in the Android Browser. No viewport metadata is set ("overview mode" is enabled, and viewport is 800 pixels wide by default)
The height and width properties of Viewport allow you to specify the viewport size (that is, the size visible before the page expands to the screen ).
As mentioned above, Android Browser loads pages with "overview mode" by default (unless this mode is disabled by the user) and defines the minimum viewport width as 800 pixels. Therefore, if your web page is defined as 320 pixels in width, your page looks smaller than the screen (unless your physical screen is 320 pixels wide, because viewport simulates a 800 pixel drawing area), as shown in figure 1. To avoid this impact, You need to explicitly define the width of the viewport to match the width of the webpage you designed.
For example, if your web page is designed to be 320 pixels wide, you need to specify the same size for the viewport width as follows:
<Meta name = "viewport" content = "width = 320"/>
In this example, the width of your web page exactly matches the screen width, so the width of the page is consistent with that of the viewport.
Note: The width value greater than 10,000 will be ignored. A value smaller than or equal to 320 will make the width value equal to the width of the device (which will be discussed below ). The height value greater than 10,000 or less than 200 is ignored.
To show how this property affects the page size, figure 2 shows a web page where the web page contains an image of 320 pixels in width, however, the width of viewport is set to 400.
Note: If the width of the viewport matches the page width and the screen size of the device does not match the size, the web page will still occupy the entire screen, even if a device screen is set to low-resolution or high-resolution, because Android Browser and WebView default scale the web page to medium-resolution screen size (as you can see in figure 2, the figure compares high-resolution and medium-resolution devices.) screen resolution is discussed in Defining the viewport target density.
Auto Scaling
Figure 2. Set viewport width = 400 and enable "overview mode" (the image on the page is 320 pixels wide ).
In addition to defining the viewport size as a precise value, you can also set it to always match the screen size of the device, assign the values of height and width of viewport to device-height and device-width respectively. This is suitable when you develop a web application with an active size, which makes the page of the web application seem fixed (exactly match the width of each screen ). For example:
<Meta name = "viewport" content = "width = device-width"/>
Figure 3. Set the viewport width = device-width or initial-scale = 1.0 web page.
The result of setting the viewport size always matches the screen size, as shown in figure 3. Note that this setting causes the image to scale to match the screen, even if the current device and target density (medium resolution by default) do not match. Therefore, the image of the high-resolution device in figure 3 is enlarged on a medium-resolution device to match the screen width.
Note: If you want the pixels of the device-width and device-height to match the physical screen of the device, instead of scaling the web page to match the target density, you must include a target-densitydpi attribute and assign it to device-dpi. This will be discussed more in Defining the viewport density. Otherwise, if you only use device-width and device-height to define the viewport size, your page will automatically adapt to each screen, but your image will also be scaled to adapt to non-screen resolution.
Define the viewport Scale
The Viewport scale determines the page scale. The Viewport attribute allows you to specify the page zoom degree in the following ways:
Initial-scale)
That is, the initial Page scaling degree. This is a floating point value and a multiplier of the page size. For example, if you set the initial scale to 1.0, the web page will be displayed at of the target density resolution. If you set it to "2.0", the page will be enlarged to 2 times.
The default initial scaling value is calculated to match the page size with the viewport size. Because the default viewport width is 800 pixels, if the screen resolution width of the device is less than 800, the initial zoom value is less than 1.0 by default to match the page width of 800 pixels on the screen.
Min scale)
The minimum allowed scale. This is a floating point value that specifies the minimum multiplier between the page size and the screen size. For example, if you set this value to "1.0", the page cannot be reduced because the minimum value and target density are.
Maximum-scale)
That is, the maximum scale allowed. This is also a floating point value that specifies the maximum multiplier between the page size and the screen size. For example, if you set this value to "2.0", the page can be up to two times larger than the target size.
User-scalable)
That is, whether the user can change the page zoom degree. If it is set to yes, the user is allowed to change it, and vice versa. The default value is yes. If you set it to no, both minimum-scale and maximum-scale will be ignored because scaling is impossible at all.
All zooming values must be within the range of 0.01-10.
For example:
<Meta name = "viewport" content = "initialize-scale = 1.0"/>
This metadata defines the initial scaling value as full screen compared to the target density of viewport.
Define the target density of viewport
The pixel density of a screen is determined by the screen resolution. It is usually defined as the number of dots per inch (dpi ). Android supports three types of screen pixel density: Low pixel density, medium pixel density, and high pixel density. A screen with a low pixel density has fewer pixels per inch, while a screen with a high pixel density has more pixels per inch. By default, the Android Browser and WebView screens are of medium pixel density.
Because the default target density is the medium pixel density, when a user has a low pixel or high pixel density screen, Android Browser and WebView will scale the page, so that they can be displayed in an appropriate size on a medium pixel density screen. More specifically, Android Browser and WebView will enlarge the page by about 1.5 times on high-pixel devices (because the pixels on high-pixel devices are smaller ), on low-pixel density devices, the page is reduced to about 0.75 times (because the pixels on low-pixel density devices are larger ).
Due to the default scaling, figure 1, 2, 3 shows the effect of web pages of the same physical size on high-pixel density devices and medium-pixel density devices (the web pages on high-pixel density devices are magnified to 1.5 times the actual size, to match the target density ). This will cause some problems to the image. For example, although an image looks the same size on a medium pixel density and a high pixel density device, the image on a high pixel density device looks more blurred, because this image was originally designed to be 320 pixels wide, it was pulled to 480 pixels wide.
Figure 4. Set viewport width = device-width, target-densitydpi = device-dpi on the web page.
You can use the target-densitydpi attribute of viewport to change the pixel density of the target screen. Values that can be assigned to it are listed below:
Device-dpi-uses the original dpi of the device as the target dp. No Default scaling occurs.
High-dpi-use hdpi as the target dpi. Devices with medium pixel density and low pixel density are reduced accordingly ..
Medium-dpi-use mdpi as the target dpi. Devices with high pixel density are scaled up, while devices with high pixel density are scaled down. This is the default target density.
Low-dpi-use mdpi as the target dpi. Devices with medium and high pixel density are scaled up accordingly.
<Value>-specify a specific dpi value as the target dpi. The value range must be between 70.
For example, to prevent the Android Browser and WebView from scaling your page based on the pixel density of different screens, you can set the target-densitydpi of viewport to device-dpi. When you do this, the page will not be scaled. On the contrary, the page is displayed based on the pixel density of the current screen. In this case, you also need to define the width of the viewport to match the width of the device so that your page can adapt to the screen. For example:
<Meta name = "viewport" content = "target-densitydpi = device-dpi, width = device-width"/>
Figure 4 shows a web page that uses these settings-on a high-pixel device, this page looks smaller, because its physical pixels are smaller than those on devices with medium pixel density, and there is no scaling. Therefore, an image with a width of 320 pixels occupies only 320 pixels on both interfaces. (If you want to customize your web page based on the pixel density of the screen, you should define the viewport and use CSS or JavaScript to provide different images for devices with different pixel density .)
Apply CSS www.2cto.com to different pixel density
Android Browser and WebView support the media feature of CSS, allowing you to create styles for devices with specific pixel density-this media feature is-webkit-device-pixel-ratio CSS media feature. The value you assign to this feature should be "0.75", "1", or "1.5", respectively, to indicate that styles is for low pixel density, medium pixel density, and high pixel density.
For example, you can create a style list stylesheets for pixel density not allowed as follows:
<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"/>
Figure 5. Use-webkit-device-pixel-ratio in CSS to specify different web pages for screens of different resolutions. Note that the hdpi device uses a different image.
Alternatively, specify different styles in a 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 );
}
}
Note: # The default style of the header applies images to devices with medium pixel density to support devices below Android. These devices do not support-webkit-device-pixel-ratio.
Depending on the viewport you set, the styles style you want to adjust for different pixel density should also be different. To make your page have appropriate styles at different pixel density, you need to set the viewport width to match the device. That is:
<Meta name = "viewport" content = "target-densitydpi = device-dpi, width = device-width"/>
In this way, Android Browser and WebView do not scale your page, and the width of the viewport can exactly match the width of the device. Figure 4 shows the effect of this setting. However, by using-webkit-device-pixel-ratio, you can apply different styles. For example, in figure 5, a page is displayed that uses the above viewport settings and uses some CSS. In this CSS, a high-resolution image is defined to be used for a screen with a high pixel density.
Apply JavaScript to different pixel density
Android Browser and WebView support a Document Object Model (DOM) feature that allows you to query the pixel density of the current device-that is, DOM's window. devicePixelRatio feature. The value of this feature specifies the scaling factor of the current device. For example, if window. the value of devicePixelRatio is "1.0". The device is of medium pixel density and is not scaled by default. if the value of devicePixelRatio is "1.5", the device is a high-pixel device, which is scaled by 1.5 times by default. the value of devicePixelRatio is "0.75". This device is a low pixel density device, which is scaled by 0.75 times by default. Of course, Android Browser and WebView are scaled based on the target density of the page. As discussed above, the default target is medium pixel density, but you can modify this target, adjust the scaling mode of your page at different screen resolutions.
For example, you can use Javascript to query the pixel density of a device as follows:
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 ");
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
