Html5 meta tag viewport application, html5metaviewport
On the html5 mobile page, the viewport definition is essential.
First, let's take a look at the concept of viewport:
First, understand the screen size and device size of mobile devices:
IPhone 3 device size: 320*480; screen size: 320*480
IPhone 4 device size: 320*480; screen size: 640*960
IPhone 5 device size: 320*568; screen size: 640*1136
From iPhone 3 to iPhone 4, the screen size is doubled when the device size remains unchanged. viewport also came into being, that is, the screen size.
Example:
<meta name="viewport" content="..." />
Definitions of viewport parameters:
<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]/>
Width and heightThe value can be defined, or the device-width | the width and height of the device-height.
Initial-scaleThe initial scaling ratio, that is, the scaling ratio when the page is loaded for the first time. 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.
Maximum-scale:
The maximum scale that users can scale. 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.
Minimum-scale:
The minimum allowed scale.
User-scalable:
Whether the user can manually zoom in or out. If it is set to yes, the user is allowed to change it, and vice versa, it is no. The default value is yes.
All zooming values must be within the range of 0.01-10.
Example:
1. Set the screen width to the device width, and disable manual scaling;
2. Set the screen density to high-frequency, medium-frequency, and low-frequency auto scaling. manual scaling is prohibited.
Maximum-scale is ignored because it is impossible to scale.
Target-densitydpi:
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.
Value Range of the target-densitydpi attribute
Summary Application
<meta name="viewport" content="width=640,user-scalable=no, target-densitydpi=device-dpi" />
I:Target-densitydpi =Device-dpi
The screen resolution remains unchanged with the device resolution.
Ii. Width Definition,The current mainstream width is640Can also be defined as device-width; height self-adaptive, not defined here
3. Disable User Scaling:User-scalable = no
The Code is as follows:
1 <!DOCTYPE html> 2First, the contant of viewport is empty, that is, keep the default value. After previewing on the mobile phone, you will find that there are black blank areas on both sides. The width of the red background is half the width of the white color, and the defined proportion is kept.
Slightly modify the code,
<meta name="viewport" content="width=device-width,user-scalable=no">The white area is full of the screen, and the originally defined 320-wide red background is full.
Note: If the width is defined as the width of the device, you can set it with the scaling ratio, that is:Initial-scale
The specific proportions vary with devices. iPhone4, 5, and 6 are double, iPhone6 plus is three times, and many Samsung mobile phones are also three times.
Therefore, when the width is set to the width of the device, the style must be scaled when it is defined. For example, for an image with a width of 320*200, the image must be processed as 320*200, and the style is defined: 160*150.
It is also recommended to modify the code:
<meta name="viewport" content="width=640,user-scalable=no,target-densitydpi=device-dpi">Set the width to 640, because the current mainstream device width is 640, style does not need special processing, consistent with PC writing.
Finishing.
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
