Mobile platform definition of META tags

HTML5/CSS3Mobile platform definition of META tags08/31/2012 YUN1297 Post reply

Here are some examples and explanations of the markings.

One, the META tag is divided into two parts: HTTP header information (HTTP-EQUIV) and page description information (name).

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

Description: Sets the character set used by the page to describe the language of the text used by the home page, and the browser will invoke the corresponding character set to display page content.

Usage:

1	<metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>

Note: The META tag defines the character set used by the HTML page as Utf-8, which is the universal code. It can be displayed on the same page in Chinese Simplified, traditional and other languages (such as Japanese, Korean) and so on.

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

The visible area. For desktop browsers, we all know exactly what viewport is, that is, to remove all toolbars, status bars, scroll bars, and so on, to look at the area of the page, which is really a valid area. Because the mobile device screen width differs from the traditional web, we need to change the viewport value.

There are actually 4 properties that we can manipulate:

width–//width of viewport (range from 200 to 10,000, default is 980 pixels)
height–//height of viewport (range from 223 to 10,000)
initial-scale–//Initial zoom ratio (range from > 0 to 10)
minimum-scale–//allows the 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	<metaname="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

Description

• Force the document and device width to remain 1:1;
• The maximum width of the document is 1.0 (Initial-scale Initial scale value and Maximum-scale maximum scale value);
• User-scalable defines whether the user can scale manually (no is not scaled), so that the size of the page is fixed on the device;

Note: The actual test found that some Android-enabled browsers do 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 of the page

123	body {    min-width: 320px;}

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

1	<metaname="format-detection" content="telephone=no"/>

Description

• To make the device browse the Web page when the number does not enable the phone function (different device interpretation, ITouch Click the number to save the contact, the IPhone to make a call), ignoring the number on the page is recognized as a phone number.
• If you need to enable the phone feature will Telephone=yes, if there is Google Maps on the page, ITunes and YouTube link will open the corresponding program components on the iOS device.

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

1	<metaname="apple-mobile-web-app-capable" content="yes"/>

Description

• Web App support is enabled on the Web site.
• This meta can be seen as "Apple device Web application xx", meaning that the meta is specifically defined for Web applications.

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

1	<metaname="apple-mobile-web-app-status-bar-style" content="black"/>

Description

• The color of the status bar (the top bar of the screen) in the web App app;
• Default (white), which can be set to 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

1	<metaname="author" contect="liudanyun, [email protected]"/>

Second, Apple Web App other settings:

Of course, the icon and launch interface with the Web App require additional two-terminal code to set, as follows:

1	<linkrel="apple-touch-icon-precomposed" href="iphone_logo.png"/>

Note: This link is to set the Web App placement on the Home screen icon file path (image four).

Use:

• This path needs to be noted in the root directory of the document that is placed under the document root of the Web site but not the server.
• Image size can be set to 57*57 (px) or Retina can be set to 114*114 (px), IPad size is 72*72 (px)

1	<linkrel="apple-touch-startup-image" href="logo_startup.png"/>

Note: This link is the interface to set the startup time.

Use:

• Place the same path as above.
• The official requirements of the start interface must be 320*640 (px), originally thought that the Retina screen can support double, but not support, the picture does not appear.

If the two meta Web App is not well understood, you can view the official explanation: Meta Tags

There are more parameter settings for link (e.g. IPod, IPad, IPhone, different size icons) to view official standard documents: Configuring WEB applications

Mobile platform definition of META tags