meta
<meta /> 标签是 HTML 语言 HEAD 区的一个辅助性标签，常用来描述一个 HTML 网页文档的属性，例如：作者、日期和时间、网页描述、关键词、页面刷新等。它提供的信息虽然用户不可见，但却是文档的最基本的元数据（meta-information）。
常见属性如下表：
| 属性 | 值 | 描述 |
|---|---|---|
| charset | character encoding |
定义文档的字符编码。 |
| content | 无 | 定义与 http-equiv 或 name 属性相关的元信息。 |
| http-equiv | content-type expires refresh set-cookie |
把 content 属性关联到 HTTP 头部。 |
| name | author description keywords generator revised others |
把 content 属性关联到一个名称。 |
| scheme | 无 | 定义用于翻译 content 属性值的格式，已废弃。 |
基础用法
-
<meta charset="utf-8" />声明文档使用的字符编码。 -
<meta name="renderer" content="webkit" />使用指定的渲染内核。 -
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />优先使用 IE 最新版本和 Chrome。 -
<meta name="keywords" content="关键词,关键词,关键词" />定义针对搜索引擎的关键词。 -
<meta name="description" content="不超过150个字符" />定义对页面的描述。 -
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />5 秒后重定向到指定 URL。 -
<meta http-equiv="windows-Target" contect="_top">强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个 frame 页调用。 -
<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT； path=/" />设置 cookie, 如果网页过期，那么存盘的cookie将被删除。
缓存
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
个性化
-
<meta name="revised" content="David, 2008/8/8/" />定义页面的最新版本。 -
<meta name="author" content="用户名, email@gmail.com" />网页作者。 -
<meta name="generator" content="webpack 4.0" />用以说明生成工具。
针对搜索引擎
-
<meta name=”robots” content=”index,follow”/>搜索引擎抓取。
viewport 自适应
<meta name="viewport" content="initial-scale=1,maximum-scale=3,minimum-scale=1,user-scalable=no" />
| 属性 | 描述 |
|---|---|
| width | 设置 layout viewport 的宽度，为一个正整数，或字符串 "width-device" |
| height | 设置layout viewport 的高度，这个属性对我们并不重要，很少使用 |
| initial-scale | 设置页面的初始缩放值，为一个数字，可以带小数，推荐 1 |
| minimum-scale | 允许用户的最小缩放值，为一个数字，可以带小数，推荐 1 |
| maximum-scale | 允许用户的最大缩放值，为一个数字，可以带小数，推荐 1 |
| user-scalable | 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 |
这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。
WebApp
-
<meta name="apple-mobile-web-app-title" content="应用标题" />添加到主屏后的标题（iOS 6 新增）。 -
<meta name="apple-mobile-web-app-capable" content="yes" />是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏。 -
<meta name="apple-touch-fullscreen" content="yes" />添加到主屏幕后，全屏显示。 -
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" />添加智能 App 广告条 Smart App Banner（iOS 6+ Safari），注意修改其中的相关信息。 -
<meta name="apple-mobile-web-app-status-bar-style" content="black" />设置苹果工具栏颜色，默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）。 -
<meta name="format-detection" content="telphone=no, email=no" />识别电话号码、邮箱地址。
其他
-
<meta http-equiv="Cache-Control" content="no-siteapp" />禁止百度转码。 -
<meta name="HandheldFriendly" content="true" />针对手持设备优化，主要是针对一些老的不识别 viewport 的浏览器，比如黑莓等。 -
<meta name="MobileOptimized" content="320" />微软的老式浏览器。 -
<meta name="browsermode" content="application" />UC 应用模式。 -
<meta name="screen-orientation" content="portrait" />UC 强制竖屏。 -
<meta name="full-screen" content="yes" />UC强制全屏。 -
<meta name="x5-fullscreen" content="true" />QQ强制全屏。 -
<meta name="x5-orientation" content="portrait" />QQ 强制竖屏。 -
<meta name="x5-page-mode" content="app" />QQ应用模式。 -
<meta name="msapplication-tap-highlight" content="no" />windows phone 点击无高光。
网友评论