Introduction to the parameters of Viewport in HTML5 and how to use it

The Internet is developing faster and faster, and various technologies are emerging one after another. The display sizes and resolutions of various devices are different. This is also a problem that our front-end personnel are currently struggling with: how to develop once and be friendly on different interfaces. Show it!

Fortunately Viewport appears in HTML5! The emergence of Viewport allows the applications or pages we develop to be displayed uniformly and friendly on devices of different sizes!

viewport syntax introduction:

<!– html document –>
 <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]
”
/>

Parameter explanation:

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

height - corresponds to width, specifies the height

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.

8487820b627113dd990f63dd2ef215f3: Specify a specific dpi value as the target dpi. The range of this value must be between 70–400.

<!– html document –>
 <meta name=”viewport” content=”target-densitydpi=device-dpi” />
 <meta name=”viewport” content=”target-densitydpi=high-dpi” />
 <meta name=”viewport” content=”target-densitydpi=medium-dpi” />
 <meta name=”viewport” content=”target-densitydpi=low-dpi” />
 <meta name=”viewport” content=”target-densitydpi=200″ />

To prevent Android Browser and WebView from scaling your page based on the pixel density of different screens, 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.

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.

maximum-scale——Maximum scaling. That is, the maximum degree of scaling 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.

user-scalable – User-adjustable scaling. 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: 1. Set the screen width to the device width, prohibit the user from manually adjusting the zoom

<meta name=”viewport” content=”width=device-width,user-scalable=no” />

Example: 2. Set the screen density to high frequency, medium frequency, low frequency automatic scaling, prohibit the user from manual adjustment Zoom

<meta name=”viewport” content=”width=device-width,target-densitydpi=high-dpi,initial-scale=1.0

【Related recommendations】

1. Special recommendation:"php programmer toolbox" V0. 1 version download

2. Example code about viewport compatibility issues

3. viewport special topic: in-depth understanding of responsive web design in css -viewport

4. Share the viewport attribute to solve the problem of the font being reset when switching from vertical screen to horizontal screen on the mobile terminal

The above is the detailed content of Introduction to the parameters of Viewport in HTML5 and how to use it. For more information, please follow other related articles on the PHP Chinese website!