<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"> <!-- wap自适应 //-->
Such marks are often seen on web pages. They are used to clear the browser cache. Record them for future query, so as not to forget
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
PS: Clear the cache in the browser. It can be used in combination with other sentences to make the IE browser download the latest content from the server when you enter the page you have visited again to achieve the effect of refreshing.
Disable caching
<meta http-equiv="Expires" content="-1">
The following 3 clear cache
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
Let the width of the web page automatically adapt to the width of the mobile screen:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
first row:
width=device-width : indicates that the width is the width of the device screen
initial-scale=1.0: indicates the initial scale
minimum-scale=0.5: Indicates the minimum zoom ratio
maximum-scale=2.0: indicates the maximum zoom ratio
user-scalable=yes: Indicates whether the user can adjust the zoom ratio
second line:
Set the page on the iPhone to be full screen.
The third row:
Cancel digits are recognized as phone numbers.
The header and footer can be regarded as DIV normal operation with css
1. Tmall <title>Tmall touch screen version</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> 2. Taobao <title>Taobao touch screen version</title> <meta charset="utf-8"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="yes" name="apple-touch-fullscreen"> <meta content="telephone=no" name="format-detection"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta property="wb:webmaster" content="c51923015ca19eb1"> <meta name="author" content="m.taobao.com"> <meta name="copyright" content="Copyright ©m.taobao.com all rights reserved"> <meta name="revisit-after" content="1 days"> <meta name="keywords" content=""> <meta name="description" content=""> 3. Jingdong <title> Jingdong - Mobile Version</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"> <meta name="format-detection" content="telephone=no"> <meta name="Keywords" content="Mobile shopping, WAP mall, daily necessities, 3C home appliances, auto supplies"> <meta name="description" content="JD Mobile Edition provides products including digital, home appliances, mobile phones, computer accessories, network products, Tens of thousands of commodities, such as daily necessities, can be quickly purchased on the mobile phone, and you can go to the JD mobile version. "> 4. NetEase <title>Mobile NetEase</title> <meta charset="UTF-8"> <meta content="width=device-width,user-scalable=no" name="viewport"> <meta name="apple-itunes-app" content="app-id=425349261"> <meta name="apple-mobile-web-app-capable" content="yes"> 5. Baidu <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 name="format-detection" content="telephone=no"> meta refers to elements that provide meta-information about the page, such as descriptions and keywords for search engines and update frequency. The tag is at the head of the document and does not contain any content. The attributes of the tag define the name/value pair associated with the document. What is unique to the mobile terminal? <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> The first meta tag means: it is mandatory to keep the width of the document and the width of the device at 1:1, and the maximum width ratio of the document is 1.0, and users are not allowed to click on the screen to zoom in and browse; width - the width of the viewport height - the height of the viewport initial-scale - the initial scale minimum-scale - the minimum scale the user is allowed to zoom to maximum-scale - the maximum scale the user is allowed to zoom to user-scalable - whether the user can manually scale The second meta tag is the safari private meta tag in the iphone device, which means: allow full-screen mode browsing; The third meta tag is also the private tag of iphone, which specifies the style of the status bar at the top of safari in iphone; The color of the status bar (the top bar of the screen) in the web app application; 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 px position of the page and float at the top of the page (will cover the page 20px height – 40px for Retina screens on iphone4 and itouch4). The fourth meta tag says: Tell the device to ignore identifying numbers in the page as phone numbers.
.