A detailed explanation of META tag usage in HTML

The META tag is an auxiliary tag in the HTML language head that is located between the header and title tags of the HTML document, providing information that is not visible to the user. It can be used in browsers (how to display content or reload pages), search engines (keywords), or other Web services.

Affirms the character encoding used by the document

<meta charset= ' Utf-8 ' >

Or

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

The META tag defines the character set used by the HTML page as Utf-8, which is the universal code. It can display Chinese simplified, traditional and other languages (such as Japanese, Korean) on the same page. Of course, you can also use gb2312 (Simplified Chinese), Big5 (Traditional Chinese) and other character sets.

At present, we generally recommend the use of the first method of writing, but also HTML5 use of the wording.

Browser and version used in the Declaration

<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1"/>

When the specified content value is ie=edge,chrome=1, the latest version of IE and Chrome are used preferentially. Assuming that the client has Google Chrome Frame installed, the chrome rendering engine is used in IE to render the page, otherwise the page will be rendered using the highest standard mode of client ie.

There are several ways to set this up:

<meta http-equiv= "x-ua-compatible" content= "ie=6"/><!--use IE6-->
<meta http-equiv= "x-ua-compatible" content= "ie=emulateie7"/><!--use IE7-->
<meta http-equiv= "x-ua-compatible" content= "ie=8"/><!--use IE8-->
<meta http-equiv= "x-ua-compatible" content= "Ie=edge"/> <!--instructs IE to display content in the highest mode currently available-->

SEO optimization Related

<meta name= "keywords" content= "HTML5, CSS3, keyword"/>
<meta name= "description" content= "no more than 150 characters"/>
<meta name= "Author" content= "Laoono"/>

Page redirection and Refresh: The number within the content represents the time (in seconds), and how much time is refreshed. If the URL is added, it is redirected to the specified Web page.

<meta http-equiv= "Refresh" contect= "5;url=http://www.111cn.net"/>
The above code means to stay 5 seconds after the automatic refresh jump to the URL URLs http://www.111cn.net.

Expires Web page Expiration time

<meta http-equiv= "Expires" contect= "mon,12 May 2016 00:20:00 GMT"/>

Set the expiration time of the Web page and, if it expires, must be called back on the server, note that you must use the GMT time format, or set directly to 0 (not cached).

pragma prohibit local caching

<meta http-equiv= "Pragma" contect= "No-cache"/>

The settings page does not exist in the cache and the page is refreshed on each visit. This setting will make it impossible for visitors to browse offline.

Viewport mobile device screen viewable area

Because the mobile device screen width is different from the traditional web, we need to change the viewport value.
Most of the 4.7-5-inch devices have a viewport width of 360px;5.5-inch devices set to 400px;iphone6 set to 375px;ipone6 plus set to 414px.

Width of Width–viewport (range from 200 to 10,000, default to 980 pixels)
Height of Height–viewport (range from 223 to 10,000)
initial-scale– Initial scaling ratio (range from > 0 to 10)
minimum-scale– allows the user to zoom to the minimum ratio
maximum-scale– allows the user to zoom to the maximum percentage
user-scalable– whether users can scale manually (No,yes)
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=no"/>

Force the width of the document and device to remain 1:1;

The maximum width of the document is 1.0 (Initial-scale initial tick value and Maximum-scale maximum scale value);
User-scalable defines whether the user can scale manually (no is not scaled), so that the size of the page fixed on the device;
Note: The actual test found that some Android's own browser does not support this rule, the page can be magnified, once the enlarged response box also enlarged, resulting in the page confusion problem, the solution: Define the minimum width of the page.

Body {
min-width:320px;
}

Note that many people use initial-scale=1 to a non-responsive web site, which makes the site 100%-width rendering, and users need to manually move the page or zoom in. If you use User-scalable=no or maximum-scale=1 at the same time as initial-scale=1, users will not be able to zoom in/out on the page to see all the content.

Some of the following settings are available for meta on mobile devices.

WebApp Full-screen mode: Camouflage app, off-line application.

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

Hide status bar/Set status bar color: Effective only when WebApp Full-screen mode is turned on. The value of the content is default | Black | Black-translucent

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

Title after adding to the main screen

<meta name= "Apple-mobile-web-app-title" content= "title"/>

Ignore numbers automatically recognize as phone numbers/ignore recognition mailboxes

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