HTML meta标签

<meta>元素提供有关页面的元信息，放在文档的头部，不包含内容，属性定义了与文档相关的键值对，不会显示在页面上，但对于机器是可读的。用于规定页面的描述、关键字、文档的作者、最后修改时间等，也会包含 header 头中的一部分信息。

name属性是描述网页的，对应于content（网页内容），以便于搜索引擎机器人查找、分类，目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类。

<!– 定义文档关键词，用于搜索引擎 –>
<meta name=”keywords” content=”HTML, CSS, XML, XHTML, JavaScript”>

<!– 定义web页面描述 –>
<meta name=”description” content=”Free Web tutorials on HTML and CSS”>

<!– 定义页面作者 –>
<meta name=”author” content=”Hege Refsnes”>

<!– 编辑器的说明 –>
<meta name=”generator” content=”FrontPage 4.0″>

<!– 标注版权 –>
<meta name=”copyright” content=”本网站版权归憨憨所有”>

<!– 通知搜索引擎多少天访问一次 –>
<meta name=”revisit-after” content=”7 days” >

<!– webkit内核进行解析 –>
<meta name=”renderer” content=”webkit”>

<!– 鼠标悬停在任务栏固定按钮时显示 –>
<meta name=”application-name” content=”两个憨憨” >

<!– 鼠标悬停Windows的开始菜单或桌面的网站快捷方式时–>
<meta name=”msapplication-tooltip” content=”两个戆戆” >

<!– 起始 URL –>
<meta name=”msapplication-starturl” content=”http://两个憨憨.com” >

<!– 固定网站首次启动时的初始窗口大小 –>
<meta name=”msapplication-window” content=”width=1024;height=768″ >

<!– 定义固定网站浏览器窗口中的“后退”和“前进”按钮的自定义颜色 –>
<meta name=”msapplication-navbutton-color” content=”#FF3300″ >

<!– 点击图标后显示一个相关网站的列表 –>
<meta name=”msapplication-task”
content=”name=两个憨憨;action-uri=http://www.憨憨.com;icon-uri=../static/憨憨.ico” />

<!– 在跳转列表菜单中放置一条分隔线 –>
<meta name=”msapplication-task-separator” content=”Forum Tasks” />

<!– 网站固定在开始屏幕上的个性化自定义色块icon和背景图片 –>
<meta name=”msapplication-TileImage” content=”tile.png”>

<!– 同前一个元数据msapplication-TileImage类似，这个功能是用来设置颜色值 –>
<meta name=”msapplication-TileColor” content=”#ef0303″>

<!– IE显示一个菜单让用户可以快速获得一个应用 –>
<meta name=”msApplication-ID” content=”App”/>

<!– Microsoft Visual Studio创建的用于标识应用的Package family –>
<meta name=”msApplication-PackageFamilyName”
content=”ZeptoLabUKLimited.CutTheRope_sq9zxnwrk84pj”/>

<!– 要传递给你的应用的字符串 –>
<meta name=”msApplication-Arguments” content=”http://两个憨憨.cn”>

<!– 强制要求应用的最小版本号,用户使用一个更旧的版本，会被要求到商店去更新 –>
<meta name=”msApplication-MinVersion” content=”V3.0″/>

<!– 阻止在用户没装应用的情况下提示安装应用 –>
<meta name=”msApplication-OptOut” content=”install”/>

<!– 阻止在用户已安装应用的情况下提示用户切换到应用 –>
<meta name=”msApplication-OptOut” content=”switch”>

<!– 阻止以上两种情况的提示 –>
<meta name=”msApplication-OptOut” content=”both”>

<!– 访问者将看不到某些相关连接 –>
<meta name=”MSSmartTagsPreventParsing” content=”True” >

<!– 打开xp 的蓝色立体按钮系统显示 –>
<meta http-equiv=”MSThemeCompatible” content=”Yes” >

<!—关闭xp 的蓝色立体按钮系统显示 –>
<meta http-equiv=”MSThemeCompatible” content=”no” >

<!– 轮询“开始”屏幕中固定图块的更新 –>
<meta name=”msapplication-badge”
content=”frequency=30; polling-uri=http://mysite.com/id45453245/polling.xml”/>

<!– 定义文本字符编码 –>
<meta charset=”utf-8″ >

<!—定义文本字符编码 –>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″>

<!– 规定要使用的预定义的样式表 –>
<meta http-equiv=”default-style” content=”the document’s preferred stylesheet”>
上面 content 属性的值必须匹配同一文档中的一个 link 元素上的 title 属性的值，或者必须匹配同一文档中的一个 style 元素上的 title 属性的值

<!– 每30秒刷新页面 –>
<meta http-equiv=”refresh” content=”30″>

<!– 5秒钟后就会跳转到指定页面 –>
<meta http-equiv=”refresh” content=”5;url=http://baidu.com ” >

<!– 禁止百度的自动转码 –>
<meta http-equiv=”Cache-Control” content=”no-siteapp” >

<!– 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 –>
<meta name=”HandheldFriendly” content=”true”>

<!– 微软的老式浏览器 –>
<meta name=”MobileOptimized” content=”320″>

<!– uc强制竖屏 –>
<meta name=”screen-orientation” content=”portrait”>

<!– QQ强制竖屏 –>
<meta name=”x5-orientation” content=”portrait”>

<!– UC强制全屏 –>
<meta name=”full-screen” content=”yes”>

<!– QQ强制全屏 –>
<meta name=”x5-fullscreen” content=”true”>

<!– UC应用模式 –>
<meta name=”browsermode” content=”application”>

<!– QQ应用模式 –>
<meta name=”x5-page-mode” content=”app”>

 

referrer 信息

referrer 有如下取值

no-referrer 请求的时候，不带 referer 请求头

no-referrer-when-downgrade 这个是默认策略，整个 URL(origin、path、queryString) 都会作为 referrer 发送，但当安全协议降级，比如从 https -> http 的时候，不会发送。

origin 只发送 URL 中的 origin 信息，比如网址为https://example.com/page.html，请求头中为referer: https://example.com/。

origin-when-cross-origin 同源请求，发送整个 URL，跨域时候和 origin 的情况一样。

same-origin 仅同源情况发送 referer

strict-origin 类似 origin，但协议不能降级，比如从http://a.com请求http://b.com或者https://…会携带 referer。

strict-origin-when-cross-origin 与 origin-when-cross-origin 类似，但协议不能降级。

unsafe-url 任何情况都发送完整的 URL。

 

IE 渲染模式

<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />

<meta name=”renderer” content=”webkit”>来启用360浏览器、QQ浏览器的极速模式核

<meta name=”force-rendering” content=”webkit”/>，让其他双核浏览器切换为极速模式。

 

视窗设置

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”/>一般在移动端中使用，width=device-width 设置网页的宽度（viewport）和设备的宽度一样，这样横向就不会出现滚动条，用户浏览体验会大幅提升；后面的几个设置不允许用户手动缩放。

 

电话检测

<meta name=”format-detection” …>来禁止自动识别电话、日期、地址，ios 上面，自动将一串数字加了链接，点击会进行拨号，加入下面第一个禁止即可。
<meta name=”format-detection” content=”telephone=no”>
<meta name=”format-detection” content=”date=no”>
<meta name=”format-detection” content=”address=no”>

 

The Open Graph Protocol（开放图谱协议）

<meta property=”og:title” content=”天猫”>
<meta property=”og:type” content=”website”>
<meta property=”og:url” content=” https://www.tmall.com/”>
<meta property=”og:image” content=” https://img.alicdn.com/480-260.png”>

Open Graph Protocol，是 Facebook 制订的一个社交网络分享协议，有了上面的内容，分享之后会带上更多的信息、展示图片等，让分享的内容更吸引人。

 

robots SEO

<meta content=”noodp” name=”robots”>跟搜索引擎爬取机器人有关。
meta robots 可以取如下的值

index 允许将该网页录入搜索引擎索引。

follow 允许搜索引擎抓取当前页面上所有的链接。

noindex 禁止将该网页录入搜索引擎索引。

nofollow 禁止搜索引擎抓取当前页面上的链接。

noarchive 在搜索结果中不保存当前页面的快照

all 相当于index, follow，此值是默认值。

noodp 不使用开放目录中的网页摘要描述。NO Open Directory Project

noydir 不使用雅虎分类目录中的网页摘要。NO Yahoo Directory

 

 

设备像素（device pixels）：物理像素，显示器的最小物理单位。这里的一个像素，并不一定是一个小正方形区块，也没有标准的宽高，只是用于显示丰富色彩的一个点而已。

设备独立像素（device independent pixels）：独立于设备的像素。有一个非严谨的说法，分辨率指的就是设备独立像素。可以通过 window.screen.width / window.screen.height 查看。平时我们所说的 iPhone X 逻辑分辨率 375 × 812 指的就是设备独立像素。chrome 检查元素模拟调试手机设备时显示如 375×667 和 320×480 都是设备独立像素。

像素分辨率：以手机屏幕为例，iPhone X 像素分辨率为 1125 × 2436，是指屏幕横向能显示 1125 个物理像素点，纵向能显示 2436 个物理像素点。通常所说的 4K 显示屏指的是 4096 × 2160。

PPI（pic per inch）：每英寸的物理像素数。以尺寸为 5.8 英寸（屏幕对角线长度）、分辨率为 1125 × 2436 的 iPhone X 为例， ppi = Math.sqrt(1125*1125 + 2436*2436) / 5.8，值为 463 ppi。

CSS 像素：浏览器使用的单位，用来精确度量网页上的内容，如：div { width: 100px; }。在一般情况下(页面缩放比为 1)，1 个 CSS 像素等于 1 个设备独立像素。

devicePixelRatio：设备物理像素和设备独立像素的比例。window.devicePixelRatio = 物理像素 / 设备独立像素。当设备像素比的比率不为 1 时，CSS 像素和设备独立像素不再对应。所以如果页面放大 200%，1 个 CSS 像素等于 4 个设备独立像素。

 

meta viewport
要实现 ideal viewport ，需要用到 meta 标签。
在 head 标签中加入 viewport 的 meta 标签：
<meta name=”viewport” content=”width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0″>
该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。当然maximum-scale=1.0, user-scalable=0不是必需的，是否允许用户手动播放根据网站的需求来定，但把width设为width-device基本是必须的，这样能保证不会出现横向滚动条。

meta viewport 的六个属性
width：，可以给它指定一个值(正整数)，或者是一个特殊的值(如device-width）
initial-scale：初始缩放比例，即当页面第一次加载时的缩放比例，为一个数字(可以带小数)；
maximum-scale：允许用户缩放到的最大比例，为一个数字(可以带小数)；
minimum-scale：允许用户缩放到的最小比例，为一个数字(可以带小数)；
user-scalable：是否允许用户手动缩放，值为 “no”(不允许) 或 “yes”(允许)；
height：与 width 相对应(很少使用)。

如果不知道设备的理想宽度就用特殊值 device-width，同时 initial-scale=1 来的到一个理想的 viewport (ideal viewport)。