一直以来,对HTML中的meta标签一知半解,这次抽时间好好总结一下
meta标签
定义: meta元素提供有关页面的元信息(meta-information), 比如针对 搜索引擎和更新频度的描述和关键词,搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等
1、所有的浏览器都支持meta标签
2、标签不用关闭
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, viewport-fit=cover">
<meta name="author" content="xiaozi">
3、必需属性:content
< meta charset="iso-8859-1" > |
< meta http-equiv="charset" content="iso-8859-1"> |
属性 | 值 | 备注 |
---|---|---|
content | value | 定义一些与http-equiv或name属性相关的元信息 |
content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。
content 属性始终要和 name 属性或 http-equiv 属性一起使用。
4、可选属性: http-equiv、name、scheme
属性 | 值 | 备注 |
---|---|---|
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 标签都没有指定任何预先定义的 名称。通常情况下,您可以自由使用对自己和源文档的读者来说富有意义的名称。
- keywords: 搜索的时候匹配到页面
< meta name="keywords" content="浏览器工作原理(22) - JavaScript是如何影响DOM树构建的?" > |
- description: 页面描述
< meta name="description" content="上一篇文章我们讲了chrome性能面板的使用,了解了请求过程中的几个性能指标,这篇文章我们一起来看一下DOM树是如何生成的," > |
- robots robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引
< meta name="robots" content="none" > |
- author 标注网页的作者
< meta name="author" content="jesse131work@163.com" > |
- generator 说明网站的采用的什么软件制作
< meta name="generator" content="信息参数" > |
- copyright 说明网站版权信息
< meta name="copyright" content="信息参数" > |
- renderer 告诉浏览器用webkit内核解析
< meta name="renderer" content="webkit" > |
- viewport 主要用于移动端,用来控制页面适配和响应各种不同分辨率的移动设备
<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设置为设备宽度,就不会出现横向滚动条了 |