WebAPP Meta Tags Daquan

1. First talk about the viewport in the mate tag:

Viewport is the viewable area, for desktop browsers, viewport refers to the area that is used to look at the page after all toolbars, status bars, scroll bars, and so on. For traditional Web pages, the width of 980 on the iphone is normal and full screen, but for WebApp, it may be a bit of a problem, on the iphone our WebApp in the vertical screen is usually 320 width.

So we have to change the viewport, we have the following property values can be set:

Width:viewport width (range from 200 to 10,000, default is 980 pixels)

Height:viewport height (range from 223 to 10,000)

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

Minimum-scale: The minimum scale to allow the user to zoom

Maximum-scale: Allows the user to zoom to the maximum scale

User-scalable: Whether the user can manually scale

For these properties, we can set one or more of them, do not need to be set up at the same time, the IPhone will automatically calculate the other property values based on the properties you set, rather than the default values directly.

If you put initial-scale=1, then width and height in the vertical screen automatically for 320*356 (not 320*480 because the address bar occupy space), horizontal screen automatically for 480*208. Similarly, if you set the width only, the Initial-scale and height will be calculated automatically. For example, you set the width=320, the vertical screen when the Initial-scale is 1, horizontal screen when it becomes 1.5

So how do these settings make Safari aware? In fact, it's very simple, just a meta, shaped like:

<meta name= "viewport" content= "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0; "After/> set up meat, our page will be rendered so

The name attribute in the 2.meta tag

Name property
(1),
(2),
(3),
(4), Tell the search engine the author of your site's production;

(5),

The properties are described as follows:

Set to all: The file will be retrieved and the link on the page can be queried;

Set to None: The file will not be retrieved, and the link on the page cannot be queried;

Set to index: The file will be retrieved;

Set to follow: links on the page can be queried;

Set to NOINDEX: The file will not be retrieved, but the link on the page can be queried;

Set to Nofollow: The file will not be retrieved, the link on the page can be queried

Main mate uses in 3.webapp

<meta name= "Apple-touch-fullscreen" content= "yes" > added to the 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 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: 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).

<meta name= "apple-mobile-web-app-capable" content= "yes" >
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black-translucent" >

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.

<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

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

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.

<meta name="sharecontent" data-msg-img="thumbnail address" data-msg-title="title" data-msg-content ="Introduction" data-msg-callback= " data-line-img=" thumbnail address " data-line-title=" title " data-line-callback=""/>

--Excerpt from the network

WebAPP Meta Tags Daquan