Using META tag viewport to solve the problem of mobile phone page scaling abnormality

With HTML5 documents to make the page on the effect of the PC is no problem, but the mobile browser will zoom to the page is very small, you can see the entire page but can't see the word!!

Just add the META tag to the Page Head tab viewport statement:

<meta name= "viewport" content= "Width=device-width" >

can help you solve this seemingly bad problem.

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]
"
/>

Width

Width represents the layout layout width of the page, controls the size of the viewport, can specify a value (the default unit px), or a special value, such as:
width=960, initial-scale=0.33 (960 is the width of the page layout, which means to reduce the other to about 1/3, so that you can see the entire page on a 320-pixel mobile device)

Or

Width=device-width (width of equipment, general writing)

Height

Same as width usage, specify 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 kinds of screen pixel density: low pixel density, medium pixel density, high pixel density. A low pixel density screen has fewer pixels per inch, and a high pixel density screen has more pixels per inch. The Android browser and webview default screens are medium pixel densities.

The following is the range of values for the Target-densitydpi property

Device-dpi– uses the device's original DPI as the target DP. Default scaling does not occur.
high-dpi– uses hdpi as the target dpi. Medium pixel density and low pixel density devices shrink accordingly.
medium-dpi– uses MDPI as the target dpi. High pixel density devices are amplified and pixel density devices shrink accordingly. This is the default target density.
LOW-DPI-Uses mdpi as the target dpi. Medium pixel density and high pixel density devices are amplified accordingly.
<value>– specifies 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 the Android browser and WebView from scaling your page based on the pixel density of different screens, you can set the viewport 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 width of the viewport to match the width of the device, so that your page can be adapted to the screen.

Initial-scale

Initial scaling. The default initial zoom level when the page is opened. This is a floating-point value and is a multiplier of the page size. For example, if you set the initial scaling to "1.0", then the Web page will show up at 1:1 of target density resolution. If you set it to "2.0", the page will be magnified to twice times.

Maximum-scale

Maximum zoom. The maximum amount of zoom allowed. This is also a floating-point value that indicates the maximum multiplier for the page size compared to the screen size. For example, if you set this value to "2.0", the page can be up to twice times larger than target size.

Minimum-scale

Minimum scaling, same usage as Maximum-scale

User-scalable

The user adjusts the zoom. That is, whether the user can change the degree of page scaling. If set to Yes, the user is allowed to change it, otherwise no. The default value is yes. If you set it to No, then both Minimum-scale and Maximum-scale will be ignored because it is impossible to scale at all.

Note: All scaling values must be within the range of the 0.01–10.


Additional meta tags other commonly used attribute usage resolution:

1, the use of <meta name= "Format-detection"/>

When browsing on a mobile phone, this tab specifies whether to display the phone number in the content of the page as a dial-up hyperlink.
The default value on the IPhone is:
<meta name= "format-detection" content= "Telephone=yes"/>
If you don't want your phone to automatically display the phone number in the page as a dial-up hyperlink, you can write:
<meta name= "format-detection" content= "Telephone=no"/>

The use of 2.<meta name= "apple-mobile-web-app-capable"/>

<meta name= "apple-mobile-web-app-capable" content= "yes"/>

The Apple-mobile-web-app-capable function is to remove the default Apple toolbar and menu bar. The content has two values "yes" and "no", and when we need to display the toolbar and menu bar, the row meta is not added, the default is the display.

The use of 3.<meta name= "Apple-mobile-web-app-status-bar-style"/>

The

function is to control the display style of the status bar:

<meta name= "Apple-mobile-web-app-status-bar-style" content= "Default"/>
<meta Name= "Apple-mobile-web-app-status-bar-style" content= "Black"/>
<meta name= " Apple-mobile-web-app-status-bar-style "content=" black-translucent/>
Default: Defaults; Black: pure black; Black-translucent: Translucent Gray