HTML mobile End--meta tag and link label __html

one, meta tags

Meta tags are primarily secondary to HTML structure layers. Meta tags play an important role both on the Internet front end and on the mobile side.

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<meta name=" viewport "content=" Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=no ">
<meta name=" apple-mobile-web-app-capable "content=" yes "/> <meta
" Apple-mobile-web-app-status-bar-style "content=" Black "/>

This is a HTML5 document for language standards.

The first group of META tags is more common. It means that it's content is an HTML document, and that the page code uses UTF-8 encoding. UTF-8 encoding is mainly for Simplified Chinese and English. It is necessary to have a correct coding definition. Otherwise, the text on the page will become garbled.

The second group of META tags is the label that moves the end genus. It means that it is a view window with the width of the contents of the view window equal to the default width of the mobile device, and the initial scaling ratio represented by Inital-scale. Typically set to 1 times times the maximum allowable user scale for maximum-scale=1.0 ; User-scalable=no Indicates whether users are supported to scale manually .

The third and fourth meta tags are exclusive tags for iOS systems.

The third group of meta apple-mobile-web-app-capable tags means whether to start the WebApp function , which is to create an icon on the main screen when you click on the page to add to the main screen feature. Clicking on the icon will go into the WebApp function, which is to simulate the local application mode to browse the Web page. The generated icon can be customized to start the webapp when the picture can also be defined, this is the role of the link tag, when introducing the link label, separate description.

The fourth group of META tags indicates the color of the phone signal, time, and the top navigation bar of the battery when the WebApp feature is started. Default defaults (white), which can be black and black-translucent (gray semitransparent). This is mainly based on the actual page design of the body color collocation to set.

second, link label

The meta tag mentions some features to be used in conjunction with the link tag, where the link tag is primarily a place to store CSS files, and there are some specific mobile-end settings

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

<meta name=" viewport "content=" width=device-width,minimum-scale=1.0,maximum-scale=1.0 , User-scalable=no "/>

<meta http-equiv= ' cache-control ' content= ' no-store/> ' <meta '

Apple-mobile-web-app-status-bar-style "content=" Black "/>

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

<link rel= "apple-touch-startup-image" href= "images/start.jpg"/> <link "rel="

Apple-touch-icon "href=" Images/iphone.png "/> <link rel=" Apple-touch-icon "sizes=

" 72x72 "href=" images/ Ipad.png "/> <link rel= Apple-touch-icon" sizes= "114x114" href= "images/iphone4.png"

/> <link

= "stylesheet" type= "Text/css" href= "print.css"  media= "only handheld and (max-width:480px)"/>

which

(1) <link rel= "Apple-touch-startup-image" href= "Images/start.jpg"/>
Represents a picture that is displayed when the Web site is loaded, after clicking on the shortcut icon generated in the main screen . This feature is a good user experience. Avoid the white screen when loading, reduce users wait for the Web site loading process of boredom. The flaw is that only the vertical screen browsing mode is currently supported, while horizontal screen browsing is not supported.

(2) <link rel= "Apple-touch-icon" href= "Images/iphone.png"/>
<link rel= "Apple-touch-icon" sizes= "72x72" href= "Images/ipad.png"/>
<link rel= "Apple-touch-icon" sizes= "114x114" href= "Images/iphone4.png"/>
These three items are different home screen icons that are customized for different versions. Of course do not define also can, click on the main screen, will be the current screen capture as an icon. The icon, which Apple-touch-icon represents, is an icon button that automatically heightened the light. corresponding to the apple-touch-icon-precomposed according to the original design does not raise the light effect of the icon. According to the actual project situation, choose to use.

(3) <link rel= "stylesheet" type= "Text/css" href= "Print.css" media= "only handheld and (max-width:480px)"/>

The link tag here indicates the external style link, but it is conditional. This condition is set by using media. It means that only the handheld device is applied and the maximum screen width is 480px.

Then, media queries here are also part of the CSS3:

Media_query: [only | not]? <media_type> [and <expression>]
* Expression: (<media_feature> [: <value>]?)
Common equipment Type:
all-All Equipment
screen-computer monitor
handheld-Portable Devices
print-Printing paper or print preview
projection-all kinds of photographic equipment
TV-TV type of device

Common Equipment Characteristics:
width | Min-width |          Max-width | Width of the browser window
Height | Min-height |        Max-height | Height of the browser window
Device-width | Min-device-width |          Max-device-width | Width value of device screen resolution
Device-height | Min-device-height |          Max-device-height | Height value of device screen resolution

Orientation has a value of two portrait|landscape. Whether the browser window is in portrait or landscape orientation. When the height of the window is greater than or equal to the width, it is portrait or landscape.

1, query the specified media relies on CSS to load HTML
<link href= ' css/480.css ' media= ' only screen and max-width:480px ' rel= ' stylesheet ' the type= ' text/css ' >

2, query the designated media directly in the CSS itself
@media only screen and (max-width:768px) {}
@media only screen and (min-width:480px) {}

@media handheld and (max-width:480px), screen and (max-device-width:480px), screen and (max-width:600px)

3, orientation rely on CSS
@media (orientation:portrait) {}
@media (orientation:landscape) {}

4, orientation rely on CSS
<link rel= "stylesheet" media= "All and (orientation:portrait)" href= "Portrait.css" >
<link rel= "stylesheet" media= "All and (Orientation:landscape)" href= "Landscape.css" >

In summary, the media label's role is to choose the appropriate CSS style by setting different conditions without using JavaScript.