一直以来，对HTML中的meta标签一知半解，这次抽时间好好总结一下
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, viewport-fit=cover">
<meta name="author" content="xiaozi">
| < meta charset="iso-8859-1" > |
| < meta http-equiv="charset" content="iso-8859-1"> |
| 属性 | 值 | 备注 |
|---|---|---|
| content | value | 定义一些与http-equiv或name属性相关的元信息 |
content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。
content 属性始终要和 name 属性或 http-equiv 属性一起使用。
| 属性 | 值 | 备注 |
|---|---|---|
| http-equiv | content-type、expires、refresh、set-cookie | 把 content 属性关联到 HTTP 头部。 |
| name | author、description、keywords、generator、revised、others、viewport、apple-mobile-web-app-title、format-detection、format-detection、apple-mobile-web-app-capable、apple-mobile-web-app-status-bar-style | 把 content 属性关联到一个名称。 |
| scheme | some_text | 不再支持。 |
| property | some_text | 定义用于翻译 content 属性值的格式。 |
http-equive 指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
<meta http-equiv="content-type" content="text/html;charset=gbk">
<meta http-equiv="expires" content="31 Dec 2008"><!--页面到期时间-->
服务器发送给浏览器的头部就会包含：
content-type: text/html
charset: gbk
expires: 31 Dec 2008
refresh：重定向,在规定的时间之后跳转到另一页面
<meta http-equiv="pragma" content="no-cache"><!--禁止浏览器从本地机的缓存中调阅页面内容，无法脱机工作-->
<meta http-equiv="Pics-label" content="(PICS－1.1'http://www.rsac.org/ratingsv01.html'I gen comment 'RSACi North America Sever' by 'inet@microsoft.com'for 'http://www.microsoft.com' on '1997.06.30T14:21－0500' r(n0 s0 v0 l0))"><!--在IE的Internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过该参数来设置的-->
<meta http-equiv="refresh" content="5;url=http://www.w3school.com.cn" />
<meta http-equiv="content-language" content="zh-CN">
<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT"><!--cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；-->
<meta http-equiv="windows-target" content="_top"><!--强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；-->
<meta http-equiv="Page-Enter" content="revealTrans(duration=10,transtion= 50)">和<meta http-equiv="Page-Exit" content="revealTrans(duration=20，transtion=6)"><!--设定进入和离开页面时的特殊效果，这个功能即FrontPage中的“格式/网页过渡”，不过所加的页面不能够是一个frame页面。-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!--#以上代码IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame. -->
scheme 不再支持
app-mobile-web-app-capable 控制苹果工具栏和菜单栏, 需要显示工具栏和菜单栏时，不需要添加，默认值为no，即正常显示。如果content设置为yes，Web应用会以全屏模式运行，可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。
property=og: open graph protocol开放内容协议 让网页成为一个“富媒体对象”， 你同意了网页内容可以被其他社会化网站引用，
name 属性提供了名称/值对中的名称，HTML 和 XHTML 标签都没有指定任何预先定义的 名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。
| < meta name="keywords" content="浏览器工作原理(22) - JavaScript是如何影响DOM树构建的？" > |
| < meta name="description" content="上一篇文章我们讲了chrome性能面板的使用，了解了请求过程中的几个性能指标，这篇文章我们一起来看一下DOM树是如何生成的，" > |
| < meta name="robots" content="none" > |
| < meta name="author" content="jesse131work@163.com" > |
| < meta name="generator" content="信息参数" > |
| < meta name="copyright" content="信息参数" > |
| < meta name="renderer" content="webkit" > |
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
| 1 概念：设备的屏幕上能用来显示网页的那一块区域，或者说是一个webview用来显示网页的那一部分，一般来说会把viewport的值设为大于屏幕，用来兼容为PC编写的网页 |
| 2 css中的1px并不等于设备的1px，桌面浏览器的css中1个像素往往对应着电脑屏幕的1个物理像素，在移动端就不一定了，window.devicePixelRatio属性意义：设备物理像素和设备独立像素的比例，css就是独立像素，devicePixelRatio代表设备上的一个css像素代表多少个物理像素，但是这个东西有兼容性，所以不能完全依赖。 另一个是用户缩放也会改变设备物理像素大小。为了让页面在不同的手机上显示同样的大小，可以将页面宽度固定，然后获取设备的宽度device-width，可以得到一个比例，再使用HTML5中viewport来对页面进行缩放，并固定不允许用户缩放 |
| 属性名 | 描述 |
|---|---|
| width | 设置layout viewport的宽度为设备宽度 |
| initial-scale | 设置页面的初始缩放值 |
| minimum-scale | 允许用户的最小缩放值 |
| maximum-scale | 允许用户的最大缩放值 |
| user-scalable | 是否允许用户进行缩放 |
<head>
<title>Test Page</title>
<script>
var deviceWidth = parseInt(window.screen.width); //获取当前设备的屏幕宽度
var deviceScale = deviceWidth / 640; //得到当前设备屏幕与640之间的比例，之后我们就可以将网页宽度固定为640px
var ua = navigator.userAgent;
//获取当前设备类型（安卓或苹果）
if (/Android (\d+\.\d+)/.test(ua)) {
var version = parseFloat(RegExp.$1);
if (version > 2.3) {
document.write('<meta name="viewport" content="width=640,initial-scale=' + deviceScale + ', minimum-scale = ' + deviceScale + ', maximum-scale = ' + deviceScale + ', target-densitydpi=device-dpi">');
} else {
document.write('<meta name="viewport" content="width=640,initial-scale=0.75,maximum-scale=0.75,minimum-scale=0.75,target-densitydpi=device-dpi" />');
}
} else {
document.write('<meta name="viewport" content="width=640, user-scalable=no">');
}
</script>
</head>
| 3 三个viewport:layout viewport 值为 document.documentElement.clientWidth. visual viewport 值为 window.innerWidth |
| 3 三个viewport:还有一个理想viewport,能完美适配移动设备的viewport, ideal viewport所有的ideal viewport宽度都是320px，无论实际宽度是多少，在iPhone中，css中的320px就代表iPhone屏幕的宽度 |
| 4 利用meta标签来设置viewport，移动端默认的viewport是layout viewport, 但是我们想要ideal viewport, 怎么设置idea viewport呢，需要使用meta标签了，把viewport设置为设备宽度，就不会出现横向滚动条了 |
