因为看到一个很好的h5自适应网站,觉得很不错,所以很好奇让我打开它的源码一探究竟。我最先研究的是它的meta标签,好了,废话不多说,以下是我的总结和比较实用的meta标签,如有错误请指教。先来完整个meta标签列表,让大家欣赏一下,呵呵。..1.2.3。4。5.6.7。8。9。10.11.12.13.14.15.16.1.这个做过前端的同学应该不陌生,先定义一个视觉视口,width,initial-scale,maximum-scale,userincontent-scalable是它的参数,就像这样是初始视口的宽度等于设备的宽度,初始视口是正常显示,既不放大也不缩小;最大视口也是1:1;用户不是允许点击放大或缩小视口;最后一个一直强调人性化设计的minimal-ui是Apple为iOS7.1Safari准备的,因为在此之前,每次打开页面时,顶部地址栏和底部导航栏一直显示,让用户每次都感觉一样。再次点击页面隐藏它,为了用户体验你的网站,你可以添加这个!!此标签用于移动端适配2.http类型:本网页为内容(contenttype):本网页的格式为textcharset(编码):本网页编码为UTF-8。需要注意的是,这是网页内容的编码,而不是文件本身。编码就不用多说了,比如xml等类型的内容。这样一句话这个META标签定义了HTML页面使用的字符集是GB2132,也就是国标汉字如果将“charset=GB2312”替换为“BIG5”,则本页面使用的字符集为繁体中文Big5码。当您浏览一些国外网站时,IE浏览器会提示您下载xx语言支持到正确显示页面,这个功能是通过读取HTML页面的meta标签的Content-Type属性,知道需要用什么字符集来显示页面,如果系统没有安装对应的字符集,IE会提示下载。其他语言也对应不同的charset,比如日文字符集是“iso-2022-jp”,韩文字符集是“ks_c_5601”。Content-Type的内容也可以:text/xml等文档类型;3.这个标签意思是删除苹果手机的工具栏和菜单栏。如果需要显示,则不需要添加,因为默认内容是no。4."apple-mobile-web-app-status-bar-style"用于控制状态栏显示风格。默认样式为黑色半透明。姜子的content="black"就是姜子的5.format-detection翻译成中文就是“格式检测”的意思,顾名思义就是用来检测html中的一些格式,meta的format-detection属性主要有如下设置:metaname="format-detection"content="telephone=no"metaname="format-detection"content="email=no"metaname="format-detection"content="adress=no"也可以连续写:metaname="format-detection"content="telephone=no,email=no,adress=no"下面说说功能各项设置详解:在电话上,你写的一串号码明明没有加链接样式,但iPhone会自动给你的文字加上链接样式,当你点这个号码的时候,它会自动拨号!如何去掉这个拨号链接?这时候,我们的meta又该大显身手了,代码如下:telephone=no禁止将号码转换为拨号链接!telephone=yes允许将号码转换为拨号链接。要启用转换功能,不需要编写此元数据。它是默认启用的!email告诉设备不识别电子邮件,并且在点击=noForbidden作为电子邮件地址后不会自动发送电子邮件!email=yes开启了,文本默认为邮箱地址,这个meta不用写,默认开启!adressadress=no禁止跳转地图!adress=yes开启点击地址直接跳转地图功能,默认开启!6.Expires值是一个已经过去的时间,所以如果你在访问这个网站的时候在地址栏中重复回车,你会重复访问每time:Expires:Fri,31Dec199916:00:00GMT例如:禁止页面在IE中缓存http响应消息头设置:CacheControl=no-cachePragma=no-cacheExpires=-1Expires是个好东西。如果服务器上的网页变化频繁,设置为0,即立即过期。7.Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control不会修改其他消息处理中的缓存处理。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached,响应消息中的指令包括public、private、no-cache,无存储,无转换,必须重新验证,代理重新验证,最大年龄。每条消息中的指令含义如下:Public表示该响应可以被任何缓存缓存;Private表示单个用户的全部或部分响应消息不能由共享缓存处理。这允许服务器仅在用户的部分响应消息对其他用户的请求无效时才进行描述。no-cache表示请求或响应消息不能被缓存。no-store用于防止重要信息被无意中发布。在请求消息中发送它不会导致请求和响应消息都不会使用缓存。max-age表示客户端可以接收到生命周期不大于指定时间(秒)的响应min-fresh表示客户端可以接收到响应时间小于当前时间加上指定时间的响应max-stale表示客户端可以在超时期间收到超过Response消息的响应。如果您为max-stalemessages指定一个值,那么客户端可以接收超过为超时期限指定的值的响应消息。,pragma和no-cache用于定义页面缓存,不缓存页面(有些浏览器为了提高速度,会缓存浏览过的页面查看器,通过下面定义的浏览器一般不缓存页面,浏览器无法离线浏览。),常用值分别是private,no-cache,max-age,must-revalidate等,默认为private,其功能根据不同的重浏览方式分为以下几种情况:1)打开一个新窗口,如果值为private,no-cache,must-revalidate,thenopenanewwindow每次访问都会重新访问服务器。而如果指定了max-age值,则在该值内不会重新访问服务器,例如:Cache-control:max-age=5(意思是网页在5秒内再次访问时,不会再次被访问到服务器)2)如果地址栏中的Enter值为private或者must-revalidate,则只有第一次访问才会访问服务器,以后不会再访问了。如果值为no-cache,则每次都会访问。max-age的值在过期之前不会重复访问。3)如果后退按钮的值为private、must-revalidate、max-age,则不会被重新访问;如果值为no-cache,则每次都会重新访问。8、Pragma(缓存模式)说明:禁止浏览器从本地计算机的缓存中访问页面内容。用法:注意:使用此设置,访问者将无法离线浏览9.强制UC浏览器全屏10.进入UC应用模式PS:UC进入应用模式后自动全屏11.强制QQ浏览器全屏12.进入QQ应用模式13.具体功能:禁止将页面中的一串数字识别为电话号码,并设置为手机可以拨打的连接,适用于页面中号码较多的场景。14.Network爬虫机器人(谷歌、百度等搜索引擎)会读取网页中的元项,并将其作为索引。当你在搜索网页的时候搜索“m.xx.com”,你会发现这个网页15.X-UA-Compatible是从IE8开始新增的设置,IE8以下的浏览器无法识别。通过在meta中设置X-UA-Compatible的值,可以指定网页的兼容模式。这里设置chrome=1并不是说增强了IE的技术来模拟Chrome浏览器,而是为了兼容谷歌开发的GoogleChromeFrame(GoogleChromeFrameEmbeddedBrowserFrameworkGCF)。本插件可以保持用户IE浏览器的外观不变,但用户浏览网页时实际使用的是Chrome内核,支持WindowsXP及以上系统的IE6/7/8。上面提到的meta标签用于指定安装GCF后使用chrome内核渲染的页面。16.最后一个是给360的,我们带来的好标签可以让360浏览器自动切换到快速模式,大大提高了页面兼容性,但是其他浏览器尚未统一。