meta标签keywords 和description以前都是我们网页优化的时候经常用到的。所以，一提到meta，我们就想到这两个了，但是近项目中用到了许多新的，没想到这个小小的标签有这么多用处。
<meta content="no" name="apple-mobile-web-app-capable">
删除默认的苹果工具栏和菜单栏。
需要显示工具栏和菜单栏时，不需要添加，默认值为no，即正常显示。如果content设置为yes，Web应用会以全屏模式运行，可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。
apple-mobile-web-app-status-bar-style 作用是控制状态栏显示样式
具体效果如下：
status-bar-style:black
默认样式
format-detection —— 格式检测，用来检测html里的一些格式，主要有以下几个设置：
- meta name=”format-detection” content=”telephone=no”
- meta name=”format-detection” content=”email=no”
- meta name=”format-detection” content=”adress=no”
或者直接写成：
meta name=”format-detection” content=”telephone=no,email=no,adress=no”
telephone
主要作用是是否设置自动将你的数字转化为拨号连接
telephone=no 禁止把数字转化为拨号链接
telephone=yes 开启把数字转化为拨号链接，默认开启
email
告诉设备不识别邮箱，点击之后不自动发送
email=no 禁止作为邮箱地址
email=yes 开启把文字默认为邮箱地址，默认情况开启
adress
adress=no 禁止跳转至地图
adress=yes 开启点击地址直接跳转至地图的功能, 默认开启
如果需要设置HTML的过期时间，可以在meta中设置
expires 属性值 --expires用于网页缓存过期时间
expires出现在http-equiv属性中，使用content属性表示页面缓存的过期时间。一旦过期就必须从服务器上重新加载.
一、加长缓存期，减少从服务器请求：
时间必须使用GMT格式. 如果你想要一个GMT时间，可以用javascript的函数toGMTString()来生成。
document.write(new Date().toGMTString())
PHP也可以用string gmdate ( string $format [, int $timestamp ] )函数得到GMT。
回到HTML的expires设置，如下：
<meta http-equiv="expires" content="Sunday 26 October 2020 03:00 GMT" />
二、禁止缓存：
如果不想缓存，这样：
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
其中的<META HTTP-EQUIV="Expires" CONTENT="0"> 可以设置为-1，如
<META HTTP-EQUIV="Expires" CONTENT="-1">
HTTP 1.1 引入了 Cache-Control 响应头参数以给站长们更多控制网站内容的权力，同时弥补了 Expires的局限
Cache-Control 的参数包括:
max-age=[单位：秒 seconds] — 设置缓存的有效时间. 类似于 Expires, 但是这个参数定义的是时间大小（比如：60）而不是确定的时间点.单位是[秒 seconds].
s-maxage=[单位：秒 seconds] — 类似于 max-age, 但是它只用于公享缓存 (e.g., proxy) .
public — 响应会被缓存，并且在多用户间共享。正常情况, 如果要求 HTTP 认证,响应会自动设置为 private.
private — 响应只能够作为私有的缓存(e.g., 在一个浏览器中)，不能再用户间共享。
no-cache — 响应不会被缓存,而是实时向服务器端请求资源。这一点很有用，这对保证HTTP 认证能够严格地禁止缓存以保证安全性很有用（这是指页面与public结合使用的情况下）.既没有牺牲缓存的效率，又能保证安全。
no-store — 在任何条件下，响应都不会被缓存，并且不会被写入到客户端的磁盘里，这也是基于安全考虑的某些敏感的响应才会使用这个。
must-revalidate — 响应在特定条件下会被重用，以满足接下来的请求，但是它必须到服务器端去验证它是不是仍然是的。
proxy-revalidate — 类似于 must-revalidate,但不适用于代理缓存.
在自适应网页设计中，我们使用meta标签来告诉浏览器网页的自适应规则。如：
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
这个meta，user-scalable=yes 是声明网页可以缩小放大。
通用搜索引擎对自适应识别校验代码
<meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-siteapp" />
这两个meta，no-siteapp和no-transform，是告诉搜索引擎不要把网页转码。
自适应网站设计对百度友好的关键
其实，使用上面两个meta声明，百度就能识别自适应网页了。
不过，为了对百度更友好，让百度更方便识别校验，我们要再添加一个meta标签。
方法也很简单，只要在上面viewport标签下面再添加一个applicable-device标签就行：
<meta name="applicable-device" content="pc,mobile">
这个meta标签，表示页面同时适合在移动设备和PC上进行浏览。
什么是Viewport?
手机浏览器会把页面放入到一个虚拟的“视口”（viewpoint）中，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域大，也可能比浏览器的可视区域小。通常这个虚拟的“视口”（viewport）比屏幕宽，会把网页挤到一个很小的窗口。
如果不显示地设置viewport，那么浏览器就会把width默认设置为980。但后果是浏览器出现横向滚动条，因为浏览器可视区域的宽度比默认的viewport的宽度小。
然后浏览器引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
meta viewport 的6个属性:
width ： 设置viewport 的宽度，默认视口宽度
height： 设置viewport 的高度
initial-scale ： 设置页面的初始缩放值
minimum-scale ：允许用户的小缩放值
maximum-scale：允许用户的缩放值
user-scalable： 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
