<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"/>
第三: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(刷新):自动刷新并指向新页面。