h5页面中的meta标签-CSDN博客

为移动设备添加viewport设置缩放

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui"/>  // viewport是用户网页的可视区域,已经是公认的标准,最初是由苹果公司创建用于iPhone上的移动版Safari;width:设置viewport宽度,为正整数或字符串'device-width',width=device-width会导致iPhone5添加到主屏后以WebApp全屏模式打开页面时出现黑边;height:设置viewport高度,一般设置了宽度会自动解析出高度,可不用设置;initial-scale:默认缩放比例,为数字,可以带小数;minimum-scale:允许用户最小缩放比例,为数字,可以带小数;maximum-scale:允许用户最大缩放比例,为数字,可以带小数;user-scalable:是否允许手动缩放,minimal-ui:让网页在加载时便可隐藏顶部的地址栏与底部的导航栏,在iOS7.1的Safari中为meta标签新增。target-densitydpi:可以改变设备的默认缩放,medium-dpi是其默认值,不过因为兼容性不好已经准备被废弃,如果显式定义target-densitydpi=device-dpi设备就会按照真实的dpi来渲染页面,例如一张320*480的图片放到iphone4里默认占满屏幕的,但如果定义了target-densitydpi=device-dpi,那么图片只占屏幕的1/4(1/2的平方),因为iphone4的分辨率是640*960;而且这个属性只对android系统起作用,ios不支持它

针对IOS系统的专属标签

<meta name="apple-mobile-web-app-title" content="标题"> //添加到主屏后的标题
<meta name="apple-mobile-web-app-capable" content="yes" />  //允许全屏模式浏览,开启对WebAapp程序的支持;即删除默认的苹果工具栏和菜单栏(默认是显示显示工具栏和菜单栏)
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> //表示当启动webapp功能时显示手机信号/时间/电池的顶部导航栏的颜色,默认值为default(白色),可以定为black(黑色）和black-translucent（灰色半透明）。这个主要是根据实际的页面设计的主体色为搭配来进行设置
<meta name="format-detection" content="telephone=no,email=no,adress=no"/> //format-detection--格式检测,是用来检测html里某些格式的;这里就是告诉设备不要识别电话/邮箱/地址,如果不添加设备则会默认跳转拨号连接/邮箱地址/地图;如果你想要让他直接跳转到电话/邮箱/地图就直接把这句去掉在需要处写入:<a href="tel:0755-10086">打电话给:0755-10086</a><a href="sms:10086">发短信给:10086</a><a href="mailto:863139978@qq.com">点击我发邮件</a>即可
<a href="mailto:863139978@qq.com;384900096@qq.com?cc=zhangqian0406@yeah.net&bcc=993233461@qq.com&subject=[邮件主题]&body=腾讯诚邀您参与%0A%0Ahttp://www.baidu.com%0A%0A<img src='images/1.jpg' />">点击我发邮件</a> //?后为抄送地址,&后为秘密抄送地址，如包含多个收件人,用分号隔开多个邮件地址;也可以在?后还可以跟'邮件主题/邮件内容',邮件内容中可以包含图片/链接等;但是添加抄送和之后的android都存在兼容问题,如果内容中包含图片则pc也不支持
<link rel="apple-touch-startup-image" sizes="320x460" href="imgs/setupImg320.png" /> //用户点击桌面上的webapp图标会加载浏览器(实际上是webkit webview模块),然后下载/解析/渲染,在此过程中,ios允许我们使用一个初始化图片来替代白色的浏览器屏幕;说通俗点就是当点击网页添加至主屏幕功能时会在主屏幕上生成一个图标,点击该图标会进入webapp功能,就是模拟本地应用的模式来浏览web页面,生成的图标可以自定义,启动webapp时的开始图片也可以定义,这是link标签的作用
 <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> //添加智能App广告条(iOS 6+ Safari),即告诉iphone的safari浏览器这个网站对应的app是什么,在页面上面显示一个下载banner

iOS 图标

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/> //iPhone和iTouch默认57x57像素,必须有
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/> //Retina iPhone和Retina iTouch,114x114像素,可以没有,但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/> //Retina iPad,144x144像素,可以没有,但推荐有 -->

iOS 启动画面

<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/> //iPad竖屏768 x 1004(标准分辨率) -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/> //iPad竖屏1536x2008(Retina) -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/> //iPad横屏1024x748(标准分辨率) -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/> //iPad横屏2048x1496(Retina) --> 
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/> //iPhone/iPod Touch竖屏320x480(标准分辨率) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/> //iPhone/iPod Touch竖屏640x960(Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/> //iPhone 5/iPod Touch 5竖屏640x1136(Retina) -->
<meta name="msapplication-TileColor" content="#000"/> //Windows 8磁贴颜色
<meta name="msapplication-TileImage" content="icon.png"/> //Windows 8磁贴图标
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/> //添加RSS订阅
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/> //添加 favicon icon

UC浏览器私有

<meta name="screen-orientation" content="portrait"> //uc强制竖屏
<meta name="screen-orientation" content="landscape"> //uc 强制横屏
<meta name="full-screen" content="yes"> //UC强制全屏
<meta name="browsermode" content="application"> //UC应用模式;使用application应用模式后,页面讲默认全屏,禁止长按菜单,禁止手势,标准排版,以及强制图片显示
<meta name="nightmode" content="enable/disable"> //nightmode的值设置为disable后,即使用户使用浏览器的夜间模式,页面的表现也仍是非夜间模式
<meta name="imagemode" content="force"> //UC浏览器为节省流量为用户提供了无图模式,但如果页面的图片是必不可少的,如验证码,需要强制浏览器显示图片,可设置imagemode, 不影响子页面,通过META设置图片加载方式会作用于整个页面,如果希望对单个图片进行设置可以使用<img src="..." show="force">
<meta name="wap-font-scale" content="no"> //uc浏览器判断到页面上文字居多时会自动放大字体优化移动用户体验，添加此头部可以禁用掉该优化

QQ浏览器

<meta name="x5-orientation" content="portrait|landscape"> //QQ强制竖屏|横屏
<meta name="x5-fullscreen" content="true"> //QQ强制全屏
<meta name="x5-page-mode" content="app"> //QQ应用模式

针对手持设备优化

<meta name="HandheldFriendly" content="true"> //HandheldFriendly标签最早在AvantGo浏览用来标示移动内容,后来变成一个通用的标准用来标示移动站点,主要针对一些老的不识别viewport的浏览器,如黑莓,但不知道这个标签的支持情况;HandheldFriendly和MobileOptimized是功能机时代的事实上标签
<meta name="MobileOptimized" content="320"> //这是Windows专有的meta标签也最终成为用于识别移动内容的另一种方法,主要针对微软的老式浏览器,但该标签的缺点是特定的宽度必须给出;这个标签的支持情况也是未知的 
<meta name="msapplication-tap-highlight" content="no"> //windows phone 点击无高光

PC端基础meta标签

<meta http-equiv="Content-Type" contect="text/html;charset=gb_2312-80"> //设定页面使用的字符编码,如英文是ISO-8859-1,还有BIG5/utf-8/shift-Jis/Euc/Koi8-2等字符集
<meta name="keywords" content="your tags" /> //页面关键词
<meta name="description" content="150 words" /> //页面描述,不超过150个字符
<meta name="author" content="name, email@gmail.com"/> //网页作者
<meta name="robots" content="index,follow" /> //搜索引擎抓取;all:文件将被检索,且页面上的链接可以被查询;none:文件将不被检索,且页面上的链接不可以被查询;index:文件将被检索;follow:页面上的链接可以被查询;noindex:文件将不被检索;nofollow:页面上的链接不可以被查询
<meta http-equiv="refresh" content="n;url=http://yourlink" /> //页面重定向和刷新:content内的数字代表时间(秒),既多少时间后刷新;如果加url,则会重定向到指定网页
<meta name="renderer" content="webkit|ie-comp|ie-stand"> //360浏览器的兼容;content的取值区分大小写,分别代表用webkit内核/IE兼容内核/IE标准内核,即页面需默认用哪个内核
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> //避免IE使用兼容模式;X-UA-Compatible是自从IE8新加的一个设置,IE8以下浏览器是不识别的;通过在meta中设置X-UA-Compatible的值可以指定网页的兼容性模式设置;在网页中指定的模式优先权高于服务器中(通过HTTP Header)IE=edge告诉IE浏览器以最高版本IE来渲染页面,另外还可以:IE=7/8/9/10......;也可以写成:content="IE=Edge,chrome=1",chrome=1可激活Chrome Frame
<meta http-equiv="Pics-label" contect=""> //网页等级评定;在IE的internet选项中有一项内容设置可以防止浏览一些受限制的网站,而网站的限制级别就是通过meta属性来设置的
<meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion= 50)"> //设定进入页面时的特殊效果,即FrontPage中的"格式/网页过渡",不过所加的页面不能够是一个frame页面;Duration的值为网页动态过渡的时间,单位为秒;Transition是过渡方式,值为0到23,分别对应24种过渡方式,如下:0--盒状收缩,1--盒状放射,2--圆形收缩,3--圆形放射,4--由下往上,5--由上往下,6--从左至右,7--从右至左,8--垂直百叶窗,9--水平百叶窗,10--水平格状百叶窗,11--垂直格状百叶窗,12--随意溶解,13--从左右两端向中间展开,14--从中间向左右两端展开,15--从上下两端向中间展开,16--从中间向上下两端展开,17--从右上角向左下角展开,18--从右下角向左上角展开,19--从左上角向右下角展开,20--从左下角向右上角展开,21--水平线状展开,22--垂直线状展开,23--随机产生一种过渡方式  
<meta http-equiv="Page-Exit" contect="revealTrans(duration=20，transtion=6)"> //设定离开页面时的特殊效果,同上
<meta http-equiv="windows-Target" contect="_top"> //强制页面在当前窗口中以独立页面显示,可防止网页被别人当作一个frame页调用

cookie设定

<meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT"> //cookie设定,如果网页过期存盘的cookie被删除,必须使用GMT时间格式
<meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT"> //设定网页到期时间,一旦网页过期必须到服务器上重新传输,必须使用GMT时间格式
<meta http-equiv="Pragma" contect="no-cache"> //设定禁止浏览器从本地缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出,页面无法脱机浏览
<meta http-equiv="cache-control" content="no-cache"> //手机页面通常在第一次加载后会进行缓存,如果不希望使用缓存可以设置no-cache
<meta http-equiv="Cache-Control" content="no-siteapp" /> //不让百度转码,其实百度并不完全遵从此协议

meta信息优化:搜索引擎越来越看重社会化分享在用户体验中的作用,也就是说社会化分享因素在seo排名中权重越来越高

<meta property="og:type" content="类型" /> //og是一种新的HTTP头部标记,即(Open Graph Protocol:开放内容协议),即这种协议可以让网页成为一个"富媒体对象",用了Meta Property=og标签,就是你同意了网页内容可以被其他社会化网站引用等,目前这种协议被SNS网站如Fackbook/renren采用,SNS已经成为网络上的一大热门应用,优质的内容通过分享在好友间迅速传播,提高站外内容的传播效率;任何网页只要遵守该协议,SNS就能从页面上提取最有效的信息并呈现给用户.Meta Property=og和meta name标签针对的对象不同，功能不同
<meta property="og:url" content="URL地址" />
<meta property="og:title" content="标题" />
<meta property="og:image" content="图片" />
<meta property="og:description" content="描述" />
<meta property=”og:videosrc” content=”http://player.youku.com/player.p ... AutoPlay=true/v.swf”/>
<meta property=”og:width” content=”500″ />
<meta property=”og:height” content=”416″ />

感悟：没有实力的时候，真理也可能被当成无聊；有实力的时候，谎言也会被当成真理