Mobile Web META tags

original http://blog.segmentfault.com/jianjian_532633/1190000000654839Add to Push Magazine

Before you introduce the mobile-specific meta tags, let's talk a little bit about HTML meta tags.

The META tag contains the HTTP header information (HTTP-EQUIV) and the page description information (name).

• Http-equiv:

  Property definitions for this enumeration, which can alter the compilation of server and user agent behavior. The compiled value takes the contents of the content. In simple terms, the HTTP protocol response header can be simulated. The most common

  is probably the content-type , which sets the encoding type. such as

    <meta  http-equiv  = "Content-type"   Content  = "text/html; Charset=utf-8 "/>   

  H5 can be simplified to

    <meta  charset  =  "Utf-8" ;   

  Http-equiv Common and other as follows (reasonable use can add SEO included).

  • content-language: Set Web page language
  • refresh: Specify time Refresh page
  • set-cookie: Set page cookie Expiration time
  Li>last-modified: Page Last generated
  • expires: Set cache expiration
  • Cache-control: Set caching mechanism for documents
  • ...

• Name: This property defines the names of document-level metadata. For the content of the Web page, convenient search engine to find categories, such as keywords, description; You can also use browser maker-customized meta, such as viewport;

Mobile-specific Properties viewport

Definition of the viewable area, such as screen scaling. Tells the browser how to standardize the rendered Web page.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

The previous section has been explained in detail, and this side will not repeat.

Format-detection

Identification of the telephone number

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

iOS Private Properties Apple-mobile-web-app-capable

Enabling WebApp mode hides the toolbars and menu bars, and works with other mates.

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

Apple-mobile-web-app-status-bar-style

In WebApp mode, change the color of the top status bar.

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Default (white, defaults) | Black | Black-translucent (Translucent)

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

WebApp corresponding link tag apple-touch-icon

Under WebApp, specify the path of the icon file on the home screen;

<link rel="Apple-touch-icon" href="Touch-icon-iphone.png " ><link rel="Apple-touch-icon" sizes="76x76" href ="Touch-icon-ipad.png"><link rel="Apple-touch-icon" sizes="120x120"  href="Touch-icon-iphone-retina.png"><link rel="Apple-touch-icon" sizes="152x152" href= "Touch-icon-ipad-retina.png">

The default iphone size is 60px, the ipad is 76px, and the retina screen is multiplied by 2;

In the absence of a uniform size icon, preference is given to the icon that is larger than the recommended size, but closest to the recommended size.

iOS7 previously the system will add special effects (fillets and highlights) to the icon, if you do not want the system to add effects, you can use apple-touch-icon-precomposed.png instead of apple-touch-icon.png

Apple-touch-startup-image

Under WebApp, set the interface at the start time;

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

The Size property is not supported and can be controlled using media query. On iphone and touch, the image size must be 230*480 px, only support vertical screen;

Other meta

<!--fast mode with 360 browser enabled (WebKit)- -<meta name="renderer" content="WebKit"><!--prevent IE from using compatibility mode --<meta http-equiv="x-ua-compatible" content="Ie=edge" ><!--optimized for handheld devices, mainly for older browsers that do not recognize viewport, such as BlackBerry--and<meta name="handheldfriendly" content="true"><!--Microsoft's Vintage browser--<meta name="mobileoptimized" content=" +" ><!--UC Force vertical screen --<meta name="screen-orientation" content="Portrait" ><!--QQ forced vertical screen --<meta name="x5-orientation" content="Portrait"><!--UC Mandatory fullscreen --<meta name="Full-screen" content="yes"><!--QQ Mandatory fullscreen --<meta name="X5-fullscreen" content="true"> <!--UC Application Mode --<meta name="Browsermode" content="Application"><!--QQ Application Mode --<meta name="X5-page-mode" content="App"><!--windows Phone Click No Highlight --<meta name="msapplication-tap-highlight" content="No" >

See W3cplus

End of summary

Therefore, the general new page, you can use the following structure, and then according to their actual needs to add the necessary.

<! DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0 "><meta name="apple-mobile-web-app-capable" content="Yes" /><meta name="format-detection"content="Telephone=no" /> <title>Demo</title></head><body><!--code here--</body></html>

More comment comments load failed, reloadmeta tag of WebApp

<meta name= "Apple-touch-fullscreen" content= "yes" >

<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 name= "Apple-mobile-web-app-status-bar-style" Content=black "/>
defaults are default (white), which can be set to Black (dark) and black-translucent (gray translucent). 
Note:A value of "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). 

There are two meta values in iOS, apple-mobile-web-app-capable and Apple-mobile-web-app-status-bar-style, both of which make the Web content appear in the app style and make the status bar transparent.
<meta name= "apple-mobile-web-app-capable" content= "yes" >
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black-translucent" >


<link rel= "apple-touch-icon-precomposed" href= "Http://spion.blog.163.com/blog/iphone_milanoo.png"/> 
Note: This link is to set the Web App placement on the Home screen icon file path. 
image size can be set to 57*57 (px) or retina can be set to 114*114 (px), ipad size is 72*72 (px)

 <meta content= "Telephone=no" name= "format-detection"/>
<meta content= "Email=no" name= "format-detection"/>//will not recognize 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.

<link rel= "Apple-touch-icon" href= "/static/images/identity/html5_badge_64.png"/>
<link rel= "apple-touch-icon-precomposed" href= "/static/images/identity/html5_badge_64.png"/>

Mobile Web META tags