Reprint: Knowledge of Mobile web making (related meta tags)

Here are some of the phone's Web pages:

One, <meta name= "viewport" id= "viewport" content= "Width=device-width, initial-scale=1" >

This meta tag is added to the head of the Web Phone wap2.0 Web page, and the page will be displayed in its original size in the iphone's browser and does not allow zooming.
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no ">
The height of the width-viewport width height-viewport
Initial-scale-Initial zoom ratio
Minimum-scale-Minimum scale to allow the user to zoom
Maximum-scale-Maximum scale to which the user is allowed to zoom
User-scalable-whether the user can manually scale

Second, <meta name= "format-detection" content= "Telephone=no" >

When the HTML page is browsed on the phone, the label is used to specify whether to display the phone number in the page content 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 your page as a dial-up hyperlink, you can write:

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

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

Description: The website opens support for Web apps.

Iv. <meta name= "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;
• Defaults are default (white), which can be set to Black (dark) and black-translucent (gray translucent).

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

！！！！ Other settings for Apple Web App:

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

<link rel= "apple-touch-icon-precomposed" href= "Iphone_milanoo.png"/>

Description: This link is to set the Web app's placement on the Home screen icon file path

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)

<link rel= "apple-touch-startup-image" href= "milanoo_startup.png"/>

Note: This link is to set the start-up interface (image five), and put the same path as above.

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.
• 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.

Five,<meta name= "Apple-touch-fullscreen" content= "yes" >"Add to Home Screen", full screen display <meta name= " Apple-mobile-web-app-capable "content=" yes "/>
The META function is to delete 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 display.
<meta content= "Telephone=no" name= "Format-detection"/>
<meta content= "Email=no" name= "format-detection"/>//will not recognize the mailbox
Tell the device to ignore numbers in the page as phone numbers
iOS with rel= "Apple-touch-icon", Android with Rel= "apple-touch-icon-precomposed". This allows you to create an app-style icon in your phone's home screen when the user saves the page as a bookmark.

<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; CHARSET=GBK "/>
<meta name= "viewport" id= "viewport" content= "Width=device-width, initial-scale=1" >
<meta name= "apple-mobile-web-app-capable" content= "yes" >
<meta name= "Apple-touch-fullscreen" content= "YES" >
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black" >

--------------------------------------------------------------------------------------------------------------- -------

<! DOCTYPE HTML PUBLIC "-//wapforum//dtd XHTML Mobile 1.0//en" "Http://www.wapforum.org/DTD/xhtml-mobile10.dtd" >
<meta http-equiv= "Content-type" content= "text/html; CHARSET=GBK ">
<meta name= "viewport" content= "Width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" >
<meta name= "format-detection" content= "Telephone=no" >
<meta name= "keywords" content= "" >

--------------------------------------------------------------------------------------------------------------- -------------

<meta name= "apple-mobile-web-app-capable" content= "yes" >
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black"/>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<meta name= "handheldfriendly" content= "True" >
<meta name= "viewport" content= "Width=device-width, minimum-scale=1, maximum-scale=1, User-scalable=no" >
<meta name= "Apple-touch-fullscreen" content= "YES"/>
<meta name= "viewport" content= "Width=device-width,maximum-scale=1.0,initial-scale=1.0,user-scalable=no"/>
<meta name= "format-detection" content= "Telephone=no"/>

Reference:
1, Baidu Encyclopedia Meta

2. Mobile website front-end design

3, mobile phone web production awareness (about META tags)

4, the mobile phone side of some standards

5.HTML <meta> tags

http://www.cnblogs.com/kuikui/p/3590673.html Reprint

Reprint: Knowledge of Mobile web making (related meta tags)