一、相关网站使用meta的实例
youku首页的Meta设置:
腾讯网首页的Meta设置:
二、meta的基础知识
定义:meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。
分类:meta标签可分为两大部分:http-equiv和name变量。
1、http-equiv
http-equiv相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助浏览器正确地显示网页内容。
说明:以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame.
PS:谷歌添加一个插件:Google Chrome Frame(谷歌内嵌浏览器框架GCF),这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器。
"content-Type" cOntent="text/html; charset=utf-8">
说明:设定页面使用的字符集
content的内容为:
- GB2312时,代表说明网站是采用的编码是简体中文;
- ISO-8859-1时,代表说明网站是采用的编码是英文;
- UTF-8时,代表世界通用的语言编码;
PS:html5页面的做法是直接使用
2、name
name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
说明:H5页面窗口自动调整到设备宽度,并禁止用户缩放页面;
viewport的属性:
- width : viewport的宽度
- height : viewport的高度(很少使用)
- initial-scale : 初始的缩放比例
- minimum-scale : 允许用户缩放到的最小比例
- maximum-scale : 允许用户缩放到的最大比例
- user-scalable : 用户是否可以手动缩放
- target-densitydpi = device-dpi" (android才生效):设备的密度等级
说明:H5页面窗口宽度为720px(根据设计图稿的尺寸来决定),并禁止用户缩放页面。target-densitydpi针对android手机,其实就是充当缩放的功能。
target-densitydpi取值:可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个。
当你设target-densitydpi = device-dpi时:
华为荣耀xx可视区宽度 = 设备宽度 * dpi比值 = 360 * (160/160) = 360
小米1可视区宽度 = 设备宽度 * dpi比值 = 320 * (240/160) = 480
联想乐檬可视区宽度 = 设备宽度 * dpi比值 = 360 * (320/160)= 720
魅蓝可视区宽度 = 设备宽度 * dpi比值 = 432 * (400/160) = 1080
PS:根据上面的结论,我强烈建议不要使用 target-densitydpi = device-dpi, 因为不同设备上最终的可视区的宽度差异很大,除非你的app有为之做处理(rem、em的相对单位写法)。
"yes" name="apple-mobile-web-app-capable">
说明:是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏 。
"black" name="apple-mobile-web-app-status-bar-style">
说明:设置苹果工具栏颜色。
"telephOne=no,email=no" name="format-detection">
说明:忽略页面中的数字识别为电话,忽略email识别。
"screen-orientation" cOntent="portrait">
说明:uc强制竖屏
"full-screen" cOntent="yes">
说明:UC强制全屏
说明:QQ强制竖屏
"x5-fullscreen" cOntent="true">
说明:QQ强制全屏
"author" cOntent="dashen" />
说明:标注网页的作者
"keywords" cOntent="新闻,新闻中心, 新闻频道">
说明:页面关键词,用于被搜索引擎收录
"description" cOntent="新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站">
说明:页面描述,用于搜索引擎收录
"renderer" cOntent="webkit">//默认webkit内核
"renderer" cOntent="ie-comp">//默认IE兼容模式
"renderer" cOntent="ie-stand">//默认IE标准模式
说明:指定双核浏览器默认以何种方式渲染页面。PS:360浏览器支持
手机H5移动端WEB资源整合之meta标签