Mobile Devices Support META tag

Source: Internet
Author: User
Tags tag name

<!--Mobile Devices Support @begin -<Metacontent= "Width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"name= "Viewport"><Metacontent= "No-cache,must-revalidate"http-equiv= "Cache-control"><Metacontent= "Telephone=no, Address=no"name= "Format-detection"><Metaname= "Apple-mobile-web-app-capable"content= "Yes"><Metacontent= "No-cache"http-equiv= "Pragma"><Metacontent= "0"http-equiv= "Expires"><Metaname= "Apple-mobile-web-app-status-bar-style"content= "Black-translucent"><!--Mobile Devices Support @end -

Meta tag name= "viewport" meaning for mobile browsing zoom control

The content values include:

Width of width-viewport, height of height-viewport

The width and Height directives specify the logical width and height of the viewport, respectively. Their value is either a number in pixels or a special marker symbol. The width directive uses the device-width tag to indicate that the viewport width should be the screen width of the device. A similar height instruction uses the DEVICE-HEIGHT flag to indicate the viewport height for the device's screen height.


Initial-scale-Initial zoom ratio

The Initial-scale directive is used to set the initial zoom scale of a Web page. The default initial scaling value differs depending on the smartphone browser. Typically, the device renders the entire Web page in the browser, and setting it to 1.0 displays the Web document without scaling.


Minimum-scale-Minimum scale to allow the user to zoom
Maximum-scale-Maximum scale to which the user is allowed to zoom

The Maximum-scale and Minimum-scale directives are used to set user limits on the scale of web pages. Values range from 0.25 to 10.0. As with Initial-scale, the values of these directives are the scale that is applied to the viewport content.


User-scalable-whether the user can manually scale

The user-scalable instruction specifies whether the user can scale the viewport, that is, the view of the Web page. A value of Yes allows the user to scale when no value is allowed.


http-equiv= "Cache-control" Cache-control header field

CACHE-CONTROL Specifies the caching mechanism that requests and responses follow. Setting Cache-control in a request message or response message does not modify the caching process in another message processing process.

The cache directives for the request include No-cache, No-store, Max-age, Max-stale, Min-fresh, only-if-cached, and the instructions in the response message include public, private, No-cache, No-store, No-transform, Must-revalidate, Proxy-revalidate, Max-age.

The instructions in each message mean:
Public indicates that the response can be cached by any buffer
Private indicates that the entire or partial response message for a single user cannot be shared with the cache. This allows the server to simply describe a partial response message for the user, which is not valid for another user's request
No-cache indicates that a request or response message cannot be cached
No-store is used to prevent the inadvertent release of important information. Sending in the request message will make the request and response messages do not use the cache.
Max-age indicates that the client can receive a response that is not longer than the specified time (in seconds)
Min-fresh indicates that the client can receive response times that are less than the current time plus a specified time
Max-stale indicates that the client can receive a response message that exceeds the timeout period. If you specify a value for the Max-stale message, the client can receive a response message that exceeds the specified value for the timeout period.

Meta tag name= "format-detection" meaning for format detection

Format-detection translated into Chinese means "format detection", as the name implies, it is used to detect some of the HTML format, the Format-detection property about meta is mainly the following several settings:
Meta name= "format-detection" content= "Telephone=no"
Meta name= "format-detection" content= "Email=no"
Meta name= "format-detection" content= "Adress=no"
You can also ligatures: Meta name= "format-detection" content= "Telephone=no,email=no,adress=no"
Here are the specific functions of each setting:
First, telephone
You write a bunch of numbers without a link style, and the iphone will automatically add your text link style, and click on this number will automatically dial! Want to get rid of this dial-up link how to do it? Then our meta is prowess again, the code is as follows:
Telephone=no banned the conversion of numbers to dial-up links!
Telephone=yes turned on the number into a dial-up link, to turn on the conversion function, this meta will not have to write, in the default is the case is open!
Second, email
Tell the device not to recognize the mailbox and not send it automatically after clicking
Email=no prohibited as an email address!
Email=yes opened the text default to the email address, this meta will not have to write, in the default is the case is open!
Third, adress
Adress=no no jump to the map!
Adress=yes opens the function of clicking the address to jump directly to the map, in the default case it is open!

Meta tag name= "apple-mobile-web-app-capable" Enable WebApp full screen mode

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 tag name= "Pragma" browser cache

This tag is often seen in web pages for clearing the browser cache
<meta http-equiv= "Pragma" content= "No-cache" >
<meta http-equiv= "Cache-control" content= "No-cache" >
<meta http-equiv= "Expires" content= "0" >
PS: Clear the browser cache, it and other words together, it will allow you to re-enter the page you have visited, ie browser must download the latest content from the server, to achieve the effect of the refresh.

Meta tag name= "Apple-mobile-web-app-status-bar-style"

<meta name= "Apple-mobile-web-app-status-bar-style" content= "Default"/>
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black"/>
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black-translucent"/>
The effect is to control the status bar display style
Status-bar-style:black

More meta tag settings, use to add at any time.

Mobile Devices Support META tag

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.