Mobile meta tag settings
1. Set the character encoding of the current html file
<meta charset="UTF-8">- 1
2 Set the browser's compatibility mode (let IE use the latest browser rendering)
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>- 1
3. Viewport (shortcut key: meta:vp)
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>- 1
- Function: In mobile browsers, when the page width exceeds the device, a virtual page container inside the browser will scale the page container to the size of the device for display;
- The width of the viewport can be set through the meta tag;
- This property is set for the mobile page viewport;
- width: the width of the viewport, width=device-width: the width is the width of the device
- initial-scale: initialize scaling, -initial-scale=1.0: no scaling
- user-scalable: whether to allow users to scale by themselves, the value is 0 or 1, yes or no
- minimum-scale: minimum zoom
- maximum-scale: maximum zoom
- Generally, if scaling is not allowed, there is no need to set the maximum and minimum scaling.
4. Cache-Control header field
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>- 1
- Cache-Control specifies the caching mechanism that requests and responses follow. Setting Cache-Control in a request message or a response message does not modify the caching process in another message process. The cache instructions in the request include no-cache, no-store, max-age, max-stale, min-fresh, only-if-cached, and the instructions in the response message include public, private, no-cache, no-store, no-transform, must-revalidate, proxy-revalidate, max-age. The meaning of the instructions in each message is as follows,
- no-cache indicates that the request or response message cannot be cached
- no-store is used to prevent important information from being released unintentionally. Sending in the request message will make the request and response messages not use the cache
- must-revalidate: Tell the browser and cache server that the local copy can be used before the local copy expires; once the local copy expires, it must go to the origin server for validity verification.
5. It is used to set to prohibit the browser from recalling the page content from the cache of the local machine. Once you leave the web page after setting, it cannot be recalled from the cache again.
<meta http-equiv="Pragma" content="no-cache"/>- 1
6. It is forbidden to identify a series of numbers on the page as a phone number and set it as a connection that the mobile phone can dial.
The default value of this tag is telephone=yes.
<meta content="telephone=no" name="format-detection"/>- 1
7. Remove the default Apple toolbar and menu bar
<meta content="yes" name="apple-mobile-web-app-capable"/>- 1
- When we need to display the toolbar and menu bar, this row meta is not needed, it is displayed by default.
8. Control the display style of the status bar
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>- 1
- content sets the status bar color
9. Conditional Comments
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
- html5shiv allows browsers to recognize html5 new tags;
- respond allows older browsers to use CSS3 media queries.