HTML之meta&&响应式布局

meta

在head标签中的meta标签,可以为HTML文档提供额外信息
meta属性主要分为两组
1.name属性与content属性
name属性用于描述网页,它是以名称/值形式的名称,name属性的值所描述的内容(值)通过content属性表示,便于搜索引擎机器人查找,分类.其中最重要的是description,keywords
2.http-equiv属性与content属性
http-equiv属性用于提供HTTP协议的响应头报文(MIME文档头),它是以名称/值形式的名称,http-equiv属性的值所描述的内容(值)通过content属性表示,通常为网页加载前提供给浏览器等设备使用.其中最重要的是content-type charset 提供编码信息,refresh刷新与跳转页面,no-cache 页面缓存,expires网页缓存过期时间.

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="refresh" content="5; url=http://www.dreamdu.com/" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="Sunday 26 October 2008 01:00 GMT" />
<meta http-equiv="content-language" content="zh-CN" />

定义网页关键词

<meta name="keywords" content="关键词1 关键词2">
多个关键词应该使用空格分开；
最好保持在10个以下，过多的关键词，搜索引擎将忽略；

定义网页简短描述

<meta name="description" content="描述">
应该保持在140-200个字符或者100个左右的汉字；

响应式布局

像素和分辨率

一张图片640*480：长640像素，宽480像素。单位面积上像素点越多（即像素点越小），这图片就越清晰细腻。但是每一个像素多少毫米取决于显示器的分辨率。A显示器640*480，B显示器1200*480，AB显示器长宽相同。那么图片在A显示器上刚好铺满，每个像素点很大，图片很粗糙，在B显示器上不能铺满，每个像素点比较小，图片比较清晰。

viewport

移动设备上的viewport就是浏览器上用来显示网页的那部分区域。
一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这样那些为桌面设计的网站也能在移动浏览器上正常显示，带来的后果就是浏览器会出现横向滚动条。移动设备默认的viewport是layout viewport。

layout viewport 的宽度是大于浏览器可视区域的宽度的，layout viewport的宽度可以通过 document.documentElement.clientWidth 来获取；（通常是980px）

visual viewport的宽度是浏览器可视区域的大小， visual viewport的宽度可以通过window.innerWidth 来获取；

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

meta标签的作用是让layout viewport的宽度等于设备的宽度也就是visual viewport的宽度，同时不允许用户手动缩放。没有设置meta，css的320px在手机屏幕中大约只有1/3宽。设置了meta，css的320px在手机屏幕中差不多铺满屏幕。

参考资料：http://www.cnblogs.com/2050/p/3877280.html