<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

meta标签可分为两大部分:http-equiv和name变量，主要使用场景有以下几种：

 

第一：声明文档使用的字符编码

 <meta charset="utf-8">

 

第二、移动端适配

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 minimal-ui">

width=device-width主要用于ie浏览器以及手机浏览器横竖屏转化，initial-scale主要用于webkit内核浏览器
 iOS 7.1 的 Safari 中为 meta 标签新增 minimal-ui 属性，让网页在加载时便可隐藏顶部的地址栏与底部的导航栏

1、width : 控制viewport的大小，可以指定一个值，如600， 或者特殊的值，如device-width为设备的宽度（单位是缩放为100%的CSS的像素）

2、height : 和width相对应，指定高度

3、initial-scale : 初始缩放比例，页面第一次加载时的缩放比例

4、maximum-scale : 允许用户缩放到的最大比例，范围从0到10.0

5、minimum-scale : 允许用户缩放到的最小比例，范围从0到10.0

6、user-scalable : 用户是否可以手动缩放，值可以是：①yes、 true允许用户缩放；②no、false不允许用户缩放

uc强制竖屏

<meta name="screen-orientation" content="portrait"/>

UC强制全屏 <meta name="full-screen" content="yes"> QQ强制竖屏 <meta name="x5-orientation" content="portrait"> 是否删除默认的苹果工具栏和菜单栏 <meta name="apple-mobile-web-app-capable" content="yes">  

第三：SEO优化

1、keywords用来告诉搜索引擎你网页的关键字是什么。

<meta name="keywords" content="xxxx">

2、description用来告诉搜索引擎你的网站主要内容。

<meta name="description" content="xxx">

 

第四：强制浏览器使用WebKit内核

强制Chromium内核，作用于360浏览器、QQ浏览器等国产双核浏览器：

<meta name="render" content="webkit"/>

强制Chromium内核，作用于其他双核浏览器：

<meta name="force-rendering" content="webkit"/>

如果有安装 Google Chrome Frame 插件则强制为Chromium内核，否则强制本机支持的最高版本IE内核，作用于IE浏览器：

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>

 

第五：格式检测

meta name=”format-detection” content=”telephone=no,email=no,adress=no”

telephone，主要作用是是否设置自动将你的数字转化为拨号连接

email，告诉设备不识别邮箱，点击之后不自动发送

adress，跳转至地图

 

 第六：其他的，比如expires，可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输，Refresh(刷新)：自动刷新并指向新页面。