Meta tag collation

Source: Internet
Author: User
Tags home screen

Meta-refers to elements that provide meta-information about the page (meta-information), such as descriptions and keywords for search engines and update frequency. The label is located in the header of the document and does not contain any content. The properties of the label define the name/value pairs associated with the document.

One, <meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no ">

Width of the Width-viewport
The height of the 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.

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, with default (white), Black (black) 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 requires attention to 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 requires attention to 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"/> This 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"/>//will not recognize the phone
<meta content= "Email=no" name= "format-detection"/>//will not recognize the mailbox
Description: Tell the device to ignore numbers in the page as a phone number
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.

VI. Cache control
<meta http-equiv= "Cache-control" content= "No-cache"/>
<meta http-equiv= "Cache-control" content= "max-age=300"/>
The following line:
<meta http-equiv= "Cache-control" content= "max-age=0"/>
Has the same effect as the following line:
<meta http-equiv= "Cache-control" content= "No-cache"/>
Some WAP browsers do not support using <meta/> tags to control caching, but they do know the meaning of the HTTP header "Cache-control:no-cache". In this case, the solution is to set the HTTP header in the server-side HTTP response.

Seven, HTTP Refresh
<meta http-equiv= "Cache-control" content= "No-cache"/>
<meta http-equiv= "Refresh" content= "/>"

Note that this XHTML MP example requires <meta http-equiv= "Cache-control" content= "No-cache"/&GT;. If the above code is not included, the WAP browser will simply display a copy of the document in the cache without having to connect to the server each time it is refreshed.
<meta http-equiv= "Refresh" content= "15; Url=hello_world_example1.xhtml "/>
Some WAP browsers do not support HTTP refresh. For example, HTTP Refresh works well on Openwave Mobile browser version 6.2.2, but it does not work on Nokia Mobile browser version 4.0, Sony Ericsson T610 and t68i mobile phone simulators.
Comments
<meta name= "Author" content= "Mark"/>

Article Source: http://www.w3cfuns.com/notes/18731/3b0fd790d6817369028923449d82354d.html

Meta tag collation

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.