对于前端开发人员来说,media并不陌生,在网页的头部我们都会看到它的身影,但是它到底是个什么东东,还是朦朦胧胧的,今天就把它梳理梳理下
一.media标签定义
meta标签是HTML中head头部的一个辅助性标签,它位于HTML文档头部的 <head>
和 <title>
标记之间,它提供用户不可见的信息。虽然这部分信息用户不可见,
但是其作用非常强大,特别是当今的前端开发工作中,设置合适的meta标签可以大大提升网站页面的可用性。
桌面端开发中,meta标签通常用来为搜索引擎优化(SEO)及 robots定义页面主题,或者是定义用户浏览器上的cookie;它可以用于鉴别作者,设定页面格式,标注
内容提要和关键字;还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级,等等。
移动端开发中,meta标签除了桌面端中的功能设置外,还包括,比如viewport设置,添加到主屏幕图标,标签页颜色等等实用设置。具体可以看后面详细的介绍。
二.meta标签分类
meta标签根据属性的不同,可分为两大部分:http-equiv 和 name 属性。
http-equiv:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助浏览器正确地显示网页内容。
name属性:主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于浏览器,搜索引擎等机器人识别,等等。
三.为移动设备添加 viewport
viewport
可以让布局在移动浏览器上显示的更好。 通常会写
content 参数:
- width viewport 宽度(数值/device-width)
- height viewport 高度(数值/device-height)
- initial-scale 初始缩放比例
- maximum-scale 最大缩放比例
- minimum-scale 最小缩放比例
- user-scalable 是否允许用户缩放(yes/no)
- minimal-ui iOS 7.1 beta 2 中新增属性(注意:iOS8 中已经删除),可以在页面加载时最小化上下状态栏。这是一个布尔值,可以直接这样写
而如果你的网站不是响应式的,请不要使用 initial-scale 或者禁用缩放。
适配 iPhone 6 和 iPhone 6plus 则需要写:
大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px,iPhone 6 上却是 375px,大部分 5.5 寸安卓机器(比如说三星 Note)的 viewport 宽为 400,iPhone 6 plus 上是 414px。
四.SEO 优化部分
页面标题<title>
标签(head 头部必须)
页面关键词 keywords
页面描述内容 description
定义网页作者 author
定义网页搜索引擎索引方式,robotterms 是一组使用英文逗号「,」分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。