Definition for mobile platform meat

Let's start with the structure of the META tag, which is divided into two parts: HTTP header information (HTTP-EQUIV) and page description information (name).

Here are some examples

1. The value of the Http-equiv property is Content-type (the setting of the display character set)

Note: Set the character set used to describe the text language that the home page is written in, and the browser will display the content based on the set of character sets

Usage:

1 <  http-equiv= "Content-type"  Content= "text/html; charset=utf-8"/ >

View Code

2. The value of the Name property is viewport (the zoom of the mobile screen)

Note: The viewport of the mobile screen is the visible area of the current page on the mobile side, and for the desktop browser, the viewport refers to the area of the Web page, except for all toolbars, status bars, scroll bars, and so on. Because the mobile device screen width differs from the traditional width, we need to change the value of the viewport.

The properties for the operable viewable area are:

Width//viewport widths (range from 200 to 10,000, default to 980 pixels)

Height//viewport (range from 223 to 10,000)

Initial-scale//Initial zoom ratio (range from >0 to 10)

Minimum-scale//Allow user to zoom to the minimum scale

Maximum-scale//allows the user to zoom to the maximum scale

User-scalable//Whether the user can scale manually (No,yes)

1 <  name= "Viewport"  content= "Width=device-width, initial-scale=1.0, User-scalable=no "/>

View Code

Note: Force the width of the document and the device to remain 1:1, the maximum document width ratio is 1.0 (Initial-scale Initial and Maximum-scale maximum), user-scalable defines whether the user can scale manually (no is not scaled), making the page fixed size.

Note: For each mobile device test, some Android browser does not support this rule, can enlarge the page, once the enlarged response box also enlarged, resulting in page confusion problem, workaround: Define the minimum width

1 body{2        min-width:320px;         3 }

View Code

3. The format-detection value of the Name property (ignoring the number of the page as the phone number)

<name= "format-detection"  content= "Telephone=no" />

View Code

Note: The phone function is no longer enabled when the device browses the page (itouch click on the number to save the contact, the iphone is to make a call), or telephone=yes if you need to enable the phone function.

4. The apple-mobile-web-app-capable value of the Name property (Web App support is enabled on the website)

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

View Code

Description: The website opens support for Web apps, which can be seen as "Web application XX for evaluation device", meaning that meta is specifically defined for Web apps.

5. The Apple-mobile-web-app-status-bar-style value of the Name property (changes the color of the top status bar)

<name= "Apple-mobile-web-app-status-bar-style"  content= "BLACK"  />

View Code

Description: The color of the status bar (the top bar of the screen) in the Web app, the default value is Defualt (white), which can be used to position black (black) and black-translucent (gray translucent);

Note: If the value "Black-translucent" will occupy the page position, floating above the page (will cover the page 20px height, iphone4 and itouch4 Retina screen is 40px).

6. Name attribute set author name and contact information

<name= "Author"  contect= "Lixin,[email protected]"/> 

View Code

Definition for mobile platform meat