Mobile Front header tag (HTML5 head Meta) reprint

<span id="Label3"></p><p><p>The following is a meta-explanation of each attribute</p></p><p><p>In particular, it is important to note that the settings for multiple properties in the content must be separated by semicolons + spaces, which will not work if the specification is Not.</p></p><pre><pre>first, <meta http-equiv= "content-type" content= "text/html; Charset=utf-8 "> //coding</pre></pre><p><p>The META tag is an accessible tag in the head area of the HTML language, which is located between the tag of the header of the HTML document and the title << tag, which provides information that is not visible to the User. Meta tags are often used to define page themes for search engine robots, or to define</p></p><p><p></p></p><p><p>A cookie on the User's browser, which can be used to identify the author, format the page, annotate the content feed and keywords, and set the page to refresh itself according to the intervals you define, as well as to set the RASC content level, and so On.</p></p><p><p>Detailed Introduction</p></p><p><p>Here are some examples and explanations of the markings.</p></p><p><p>The META tag is divided into two parts: the HTTP header information (http-equiv) and the page description information (NAME).</p></p><p><p>★http-equiv</p></p><p><p>HTTP-EQUIV is similar to the HTTP header protocol, which responds to the browser with some useful information to help correct and accurately display the content of the Web Page. Common types of Http-equiv are:</p></p><pre><pre>1, Content-type and Content-language (the setting of the display character Set) transferred from the global net edu24ol.com to the global net edu24ol.com transferred from the global net edu24ol.com</pre></pre><p><p>Description: sets the character set used by the page to indicate that the text used by the home page is already spoken, and the browser will invoke the corresponding character set to display the page Content.</p></p><pre><pre><meta http-equiv= "content-type" content= "text/html; charset=gb2312 "><meta http-equiv=" content-language "content=" zh-cn "></pre></pre><p><p>Note: the META tag defines the character set used by the HTML page as GB2132, which is the GB character Code. If you replace "charset=gb2312" with "BIG5", the character set used for this page is the traditional Chinese Big5 code. When you</p></p><p><p></p></p><p><p>Browse some foreign sites, ie browser will prompt you to correctly display the page need to download XX language support. This is done by reading the Content-type property of the META tag of the HTML page and knowing which character set to use to display the Page. Such as</p></p><p><p>If the corresponding character set is not installed in the system, IE will prompt to Download. Other languages also correspond to different charset, such as the Japanese character set is "iso-2022-jp", the Korean is "ks_c_5601".</p></p><p><p>Content-type content can also be: Text/xml and other document types;</p></p><p><p>CharSet options: iso-8859-1 (english), BIG5, UTF-8, shift-jis, Euc, koi8-2, us-ascii, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp,</p></p><p><p>euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1,x-cns11643-2 and other character sets; the Content of Content-language can also be: EN, Fr and other language codes.</p></p><pre><pre>second, <meta id= "viewport" name= "viewport" content= "width=320"; initial-scale=1.0;maximum-scale=1.0; user-scalable=no; " />//the Zoom of the screen</pre></pre><p><p>1. viewport:</p></p><p><p></p></p><p><p>The Visible Area. For the desktop browser, we all know exactly what viewport is, and that is to go out all the toolbars, the status bar, the scroll bar, and so on to look at the page area,</p></p><p><p>This is a truly effective AREA. Because the mobile device screen width is different from the traditional web, we need to change the viewport;</p></p><p><p>There are actually 4 properties that we can manipulate:</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre><pre>width- // viewport (range from 200 to 10,000, default is 980 pixels) height-// viewport (range from 223 to 10, initial-scale- // Initial scaling (range from >0 to ten) minimum-scale- // 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 indent (no,yes) <meta content= "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0; "name=" viewport "></pre></pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><p><p>The first meta tag indicates:</p></p><p><p></p></p><p><p>Force the document and device width to remain 1:1;</p></p><p><p>The maximum width of the document is 1.0 (initial-scale Initial scale value and Maximum-scale maximum scale value);</p></p><p><p>User-scalable defines whether it is scalable (0 is not scaled), so that the size of the page is fixed on the device.</p></p><p><p>(note: The actual test found that HTC G7 its own system browser does not support this rule, can enlarge the page, once the enlarged response box also enlarged, resulting in Russian page confusion problem, solution: define the minimum width of the page min-width,body{min-width: 300px;} ）</p></p><pre><pre>third, <meta name= "apple-mobile-web-app-capable" content= "yes"/> //offline application of another technique <meta name= " Apple-mobile-web-app-status-bar-style "content=black"/> //hide status bar \</pre></pre><p><p>Description: the website opens support for web Apps.</p></p><p><p></p></p><p><p>Here's a detailed description of the iOS Device's role in these two meta functions (the app is known as an "offline app", but it's literally misunderstood and thought to be out of the web, so I'm still using the web app to describe It.) ）：</p></p><p><p>This meta can be seen as "apple device Web application xx", meaning that the meta is specifically defined for Web Applications.</p></p><p><p>Description</p></p><p><p>The color of the status bar (the top bar of the Screen) in the Web App app;</p></p><p><p>Defaults are default (white), which can be set to black (dark) and black-translucent (gray translucent).</p></p><p><p>Attention:</p></p><p><p>A value of "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).</p></p><p><p>Correction: before reviewing some information, said Apple-mobile-web-app-status-bar-style property is hidden status bar, in fact, This is a misunderstanding, here for everyone to correct this problem.</p></p><p><p>Other settings for Apple Web app:</p></p><p><p>of course, the icon and launch interface with the Web App require additional two-terminal code to set, as Follows:</p></p><pre><pre><link rel= "apple-touch-icon-precomposed" href= "iphone_milanoo.png"/></pre></pre><p><p>Note: this link is to set the Web App placement on the Home screen icon file path.</p></p><p><p>Use:</p></p><p><p>This path needs to be noted in the root directory of the document that is placed under the document root of the Web site but not the Server.</p></p><p><p>Image size can be set to 57*57 (px) or retina can be set to 114*114 (px), ipad size is 72*72 (px)</p></p><pre><pre><link rel= "apple-touch-startup-image" href= "milanoo_startup.png"/></pre></pre><p><p>Description</p></p><p><p>This link is the setting of the interface at the start time, the placement of the road is similar to the Above.</p></p><p><p>Use:</p></p><p><p>This path needs to be noted in the root directory of the document that is placed under the document root of the Web site but not the Server.</p></p><p><p>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.</p></p><pre><pre>Iv. <meta content= "black" name= "apple-mobile-web-app-status-bar-style"/>//the style of the status bar on safari top in the specified iphone <meta content= "telephone=no" name= "format-detection"/> <meta content= "email=no" name= "format-detection"/>/ /will not recognize the mailbox</pre></pre><p><p>Tell the device to ignore numbers in the page as phone numbers</p></p><p><p></p></p><p><p>To make the device browse the Web page when the number does not enable the phone function (different device interpretation, itouch Click the number to save the contact, the iphone to make a call), ignoring the number on the page is recognized as a phone number.</p></p><p><p>If you need to enable the phone function will be telephone=yes, the specific call format can write code <a href= "13888888888″>call me</a>, If there is Google Maps on the page, The itunes and YouTube links will open the appropriate program components on your iOS device.</p></p><pre><pre><meta name= "Author" contect= "mr.he"/>//author's Name</pre></pre><p><p>Mobile <span class="wp_keywordlink">Front-End development to add some <span class="wp_keywordlink_affiliate">webkit-specific <span class="wp_keywordlink">HTML5 header tags, Help the browser to better parse the <span class="wp_keywordlink">HTML <span class="wp_keywordlink">code, better to the Mobile <span class="wp_keywordlink">Web front-end page display. This article organizes some of the commonly used meta tags. </span></span></span></span></span></span></p></p><pre><! DOCTYPE html> <!--using HTML5 DOCTYPE, case-sensitive<br>