I am now front-end page development often used meta tag content compiled into the mobile side of the web development meta information for the needs of access.
1, declare the character encoding used in the document
<meta charset='utf-8'> or:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> The meta tag defines the HTML page used by the character set utf-8, is the universal code. It can be in the same page shows the Japanese, Korean, and other languages (such as Chinese simplified, traditional) and so on.
And now we generally recommend the use of the first wording, but also HTML5 use of the wording.
2, declare the use of the browser and version
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> When the specified content value is IE = edge, chrome = 1, the preferred version of IE and Chrome. Assuming that the client installs the Google Chrome Frame, the chrome rendering engine is used in IE to render the page, otherwise the page will be rendered using the client's highest standard mode.
There are several ways to set 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" /> <!--Indicates that IE displays the content in the highest available mode--> 3, SEO optimization related
Page description, each page should have a description tag that does not exceed 150 characters and can accurately reflect the content of the page.
<meta name="description" content="No more than 150 characters" /> Page keywords, each page should have a unique set of keywords that describe the content of the page.
Use people to search and describe accurately descriptive and representative keywords and phrases on the information provided on the page.
<meta name="keywords" content="html5, css3, other keywords"/> Define web author, not necessary.
<meta name="author" content="Goocode" /> 4, page redirection and refresh: content within the number represents the time (seconds), how much time after the refresh. If you add url, it will redirect to the specified page.
<meta http-equiv="Refresh" contect="5;url=http://www.goocode.net" /> The above code means that after 5 seconds to stay automatically refresh to jump to the URL URL http://www.goocode.net.
5, Expires page expiration time
<meta http-equiv="Expires" contect="Mon,12 May 2016 00:20:00 GMT" /> Set the expiration date of the page, once expired must be re-called to the server, it should be noted that must use the GMT time format, or directly set to 0 (not cache).
6, Pragma prohibits local cache
<meta http-equiv="Pragma" contect="no-cache" /> The settings page is not saved in the cache, and the page is refreshed for each visit. This setting, visitors will not be able to browse offline.
7, viewport mobile device screen visible area
Because the width of the mobile device is different from the traditional web, we need to change the viewport value.
Most of the 4.7-5 inch device viewport wide set to 360px; 5.5-inch device set to 400px; iphone6 set to 375px; ipone6 plus set to 414px.
Width - the width of the viewport (range from 200 to 10,000, defaults to 980 pixels)
Height - height of viewport (range from 223 to 10,000)
Initial-scale - the initial scale (range from> 0 to 10)
Minimum-scale - the minimum percentage allowed to be scaled by the user
Maximum-scale - the maximum percentage allowed to be scaled by the user
User-scalable - whether the user can manually scale (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 the device to 1: 1;
The maximum width of the document is 1.0 (initial-scale initial scale value and maximum scale maximum scale value);
User-scalable Defines whether the user can manually scale (no for non-scaling), so that the page is fixed on the size of the device;
Note: the actual test found that some Android system comes with the browser does not support this rule, to the page to enlarge, once the amplified response box also will be enlarged, resulting in page problems, the solution: the definition of the page Minimum width.
body {
min-width: 320px;
} Note that many people use the initial-scale = 1 to non-responsive Web site, which will allow the site to render in 100% width, the user needs to manually move the page or zoom. If user-scalable = no or maximum-scale = 1 is used with initial-scale = 1, the user will not be able to zoom in / out to see the entire contents.
There are some of the following settings for meta on mobile devices.
8, WebApp full screen mode: camouflage app, offline applications.
<meta name="apple-mobile-web-app-capable" content="yes" /> 9, hide the status bar / set the status bar color: only in the open WebApp full screen mode to take effect. The value of content is default | black | black-translucent.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 10, the title added to the main screen
<meta name="apple-mobile-web-app-title" content="title" /> 11, ignore the number automatically recognized as the phone number
<meta content="telephone=no" name="format-detection" /> 12, ignore the identification of the mailbox
<meta content="email=no" name="format-detection" /> More Meta tags related information I will continue to update, thanks for the attention.
