Comment: With the popularity of high-end mobile phones (Andriod, Iphone, Ipod, WinPhone, etc.), mobile Internet application development is also receiving more and more attention from people. Using html5 to develop mobile applications is the best choice. However, each phone has different resolutions and screen sizes. How can the application or page size we developed be suitable for use in various high-end phones? Learn html5 viewport
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
——Controlls the size of the viewport, which can be specified as a value or a special value, such as device-width, which is the width of the device (units of the pixels of the CSS when scaled to 100%.
height
——corresponding to width, specifying height.
target-densitydpi
——The density of a screen pixel is determined by the screen resolution and is usually defined as the number of dots per inch (dpi). Android supports three screen pixel density: 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 have a medium pixel density by default.
Below is the value range of the target-densitydpi attribute
device-dpi: Use the original dpi of the device as the target dp. Default zooming does not occur.
high-dpi: Use hdpi as target dpi. Medium and low pixel density devices are reduced accordingly.
medium-dpi: Use mdpi as target dpi. The high pixel density device is enlarged accordingly, and the pixel density device is reduced accordingly. This is the default target density.
low-dpi: Use mdpi as target dpi. Medium and high pixel density devices are amplified accordingly.
<value>: Specify a specific dpi value as 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 pages based on the pixel density of different screens, you can set the target-densitydpi of the viewport 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 width of the viewport to match the width of the device so that your page can adapt to the screen.
initial-scale
——Initial scaling. That is, the initial zoom level of the page. This is a floating point value, a multiplier of the page size. For example, if you set the initial scaling to 1.0, the web page will be displayed with a 1:1 resolution of the target density. If you set it to 2.0, then this page will be enlarged to 2x.
maximum-scale
——Maximum zoom. That is the maximum allowed scaling degree. This is also a floating point value that indicates the maximum multiplier of the page size compared to the screen size. For example, if you set this value to 2.0, this page can be enlarged up to 2 times compared to the target size.
user-scalable
——User adjusts the zoom. That is, whether the user can change the page zoom level. If set to yes, the user will allow it 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 because scaling is simply not possible.
All scaling values must be within the range of 0.01–10.
Example: 1. Set the screen width to the device width, prohibiting users from manually adjusting the zoom
<meta name=viewport content=width=device-width,user-scalable=no />
2. Set the screen density to automatic scaling of high frequency, medium frequency and low frequency, and prohibit users from manually adjusting the scaling
<meta name=viewport content=width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no/>