Viewport usage in html5 development_html/css_WEB-ITnose

Reprinted from: http://www.php100.com/html/webkaifa/HTML5/2012/0831/10979.html

With high-end mobile phones (Andriod, Iphone, Ipod, WinPhone, etc. ), mobile Internet application development has attracted more and more attention. Using HTML5 to develop mobile applications is the best choice. However, each mobile phone has a different resolution and screen size. How can we make the application or page size we develop suitable for various high-end mobile phones?

Learning how to use html5 viewport can help you do this...

viewport syntax introduction:

01

02

03

content="

04	height = [pixel_value | device-height] ,

05	width = [pixel_value | device-width ] ,

06	initial-scale = float_value ,

07	minimum-scale = float_value ,

08	maximum-scale = float_value ,

09	user-scalable = [yes | no] ,

10	target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]

11

"

12

/>

1. Set width

To control the size of the viewport, you can specify a value or a special value. For example, device-width is the width of the device (the unit is CSS pixels when scaling is 100%).

2. Set height

corresponding to width and specify the height.

3. Pixel density target-densitydpi

A screen pixel density is determined by the screen resolution, usually defined as the number of dots per inch (dpi). Android supports three screen pixel densities: low pixel density, medium pixel density, and high pixel density. A low pixel density screen has fewer pixels per inch, while a high pixel density screen has more pixels per inch. Android Browser and WebView default screens are medium pixel density.

The following is the value range of the target-densitydpi attribute

device-dpi? Use the original dpi of the device as the target dp. Default scaling does not occur.

high-dpi ? Use hdpi as the target dpi. Medium pixel density and low pixel density devices scale down accordingly.

medium-dpi ? Use mdpi as the target dpi. Devices with high pixel density scale up accordingly, and devices with pixel density scale down accordingly. This is the default target density.

low-dpi - Use mdpi as the target dpi. Medium pixel density and high pixel density devices scale up accordingly.

? Specify a specific dpi value as the target dpi. The range of this value must be between 70 and 400.

1

2

3

4

5

6

To prevent the Android Browser and WebView from scaling your page based on the pixel density of different screens, you You can set the viewport's target-densitydpi to device-dpi. When you do this, the page will not scale. Instead, the page is displayed based on the pixel density of the current screen. In this case, you also need to define the viewport's width to match the device's width so that your page can fit on the screen.

4. Initial scaling initial-scale

Initial scaling. That is, the initial zoom level of the page. This is a floating point value that is a multiplier of the page size. For example, if you set the initial scaling to "1.0", then the web page will be displayed at 1:1 of the target density resolution when displayed. If you set it to "2.0", then the page will be enlarged to 2 times.

5. Maximum zoom maximum-scale

Maximum zoom. That is, the maximum zoom allowed. This is also a floating point value indicating the maximum multiplier of the page size compared to the screen size. For example, if you set this value to "2.0", then the page can be enlarged up to 2 times compared to the target size.

6. Whether to allow users to zoom user-scalable

Users can adjust the zoom. That is, whether the user can change the zoom level of the page. If set to yes, the user is allowed to change it, otherwise it is no. The default value is yes. If you set it to no, both minimum-scale and maximum-scale will be ignored, since scaling is not possible at all.

All scaling values ​​must be within the range of 0.01~10.

Example:

(Set the screen width to the device width and prohibit the user from manually adjusting the zoom)

(Set the screen density to high frequency, medium frequency, low frequency automatic scaling, prohibit the user from manually adjusting the scaling)