Use of meta tags on mobile platforms and platform meta

Use of meta tags on mobile platforms and platform meta

I. meta Tags are divided into two parts: HTTP header information (http-equiv) and page description information (name ).

1. Content-Type value of the http-equiv attribute (display character set setting)

Note: Set the character set used on the page to describe the text language used by the homepage. the browser will call the corresponding character set to display the page content.

Usage:

1	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Note: This meta tag defines that the character set used for the HTML page is UTF-8, which is a universal code. It can display Simplified Chinese, traditional Chinese, and other languages (such as Japanese and Korean) on the same page.

2. viewport value of the name attribute (scaling the screen)

That is, the visible area. For desktop browsers, we all know what viewport is, that is, the area used to view webpages after all the toolbar, Status Bar, and scroll bar are removed. This is a truly effective area. Because the screen width of mobile devices is different from that of traditional web devices, we need to change the viewport value.

In fact, we can operate on four attributes:

Width-// The width of the viewport. The value ranges from 200 to 10,000. The default value is 980 pixels)
Height-// The height of the viewport (range from 223 to 10,000)
Initial-scale-// initial scaling ratio (range:> 0 to 10)
Minimum-scale-// minimum scale allowed by users
Maximum-scale-// maximum scale allowed by users
User-scalable-// whether the user can manually Scale (no, yes)

1	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Note:

• The width of the document and the device must be kept;
• The maximum width ratio 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 indicates not to scale), so that the page size is fixed on the device;

Note: In actual tests, it is found that some browsers of Android do not support this rule, and the page can be enlarged. Once the box of the enlarged response is enlarged, the page may be disordered, solution: define the minimum page width

123	body {    min-width: 320px;}

3. format-detection value of the name attribute (ignore the number on the page as the phone number)

1	<meta name="format-detection" content="telephone=no" />

Note:

• Enable the phone number function when devices browse the Web page (different device interpretations, iTouch click the number to save the contact, iPhone to call the phone), ignore recognizing the number in the page as the phone number.
• If telephone = yes is needed to enable the phone function, if Google Maps is displayed on the page, the link between iTunes and YouTube will open the corresponding program components on the ios device.

4. apple-mobile-web-app-capable value of the name attribute (website support for web apps is enabled)

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

Note:

• The website enables support for web apps.
• This meta shows that the content is "web application xx of Apple devices", which means that this meta is specially defined for web applications.

5. The value of apple-mobile-web-app-status-bar-style in the name attribute (changes the color of the top status bar)

1	<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Note:

• The color of the status bar (the top bar of the screen) in the web app;
• The default value is default (white), which can be set to black (black) and black-translucent (gray translucent );

Note: If the value is "black-translucent", it will occupy the page location and float above the page (it will overwrite the Retina screen of the page with 20 PX height iphone4 and itou44 ).

6. Set the author's name and contact information for the name attribute.

1	<meta name="author" contect="liudanyun, liudy102@163.com" />

2. Other settings of Apple Web App:

Of course, the icon and startup interface of the Web App require additional code at both ends, as shown below:

1	<link rel="apple-touch-icon-precomposed" href="iphone_logo.png" />

Note: This link is used to set the icon file path for placing the Web App on the home screen (Image 4 ).

Usage:

• You must note that this path is placed under the root directory of the website document, but not the root directory of the server document.
• The image size can be set to 57*57 (px) or 114*114 (px) for Retina, and 72*72 (px) for iPad)

1	<link rel="apple-touch-startup-image" href="logo_startup.png" />

Note: This link is the interface for setting startup.

Usage:

• The path is the same as the above.
• The size of the startup interface must be 320*640 (px), which was originally thought to be double for the Retina screen, but not for the image.

For more information about the two Web App meta files, see the official explanation: Meta Tags.

For more parameter settings on link (for example, iPod, iPad, and iPhone icons of different sizes), see the official standard documentation: Tracing ing Web Applications.