详细解析HTML5开发移动项目经验谈
说实话，我们这次开发移动端的项目，整个项目组的人都是第一次，最初立项的时候为是选择native app和web app还争论了一番，最后综合考虑，我们选择了web(我们选择了h5)开发。但从这两种开发模式的特点来说，从它们诞生之日起就开始了不断的争论，孰好孰坏，本文不作探讨，只是简单罗列下本人开发遇到的问题和最终的解决方案。
1. 响应式web设计
说到这个，移动开发面对的屏幕尺寸那叫一个丰富，其中安卓阵营就够让人头痛的。我们在PC端常用的两种布局方式就是固定布局和弹性布局，前者设置一个绝大多数电脑能正常显示的固定宽度居中显示，后者则采用百分比。关于这两者讨论的文章很多，有兴趣的自己查阅下，我今天要介绍的就是相信你已经听过的“响应式布局”，响应式布局意味着媒体查询，这个在css2就已经出现的东西随着html5、css3的到来又增添了新的生机。
响应式web设计并非新的技术，只不过将已有的开发技巧(弹性布局、弹性图片和媒体查询等)整合在了一起，并命了这个听起来很牛X的名字——响应式web设计。犹如当年的Ajax一样，将已有的技术重新组合发挥新的作用。
(1).媒体查询初探。媒体查询并非新出现的技术，如下：
其中就使用了媒体查询，通过 标签的media属性为样式表指定了设备类型，当然CSS3时代的媒体查询更加丰富。
发现了他们的区别吗?对，不只是针对设备进行适配，而且加了一个条件，就是当设备纵向放置的时候才匹配，咱们再看一个。
大家会发现我们又拓展了一个条件，对，就是当设备屏幕的宽度大于960px才会加载style.css样式文件。我们究竟有哪些特性是可以被探测到的呢?下面列了一部分供大家参考(参考自http://www.w3.org/html/ig/zh/wiki/CSS3媒体查询)：
width 视口宽度
height 视口高度
device-width 设备屏幕的宽度
device-height 设备屏幕的高度
orientation 检测屏幕处于横屏还是竖屏
aspect-ratio 基于视口的宽高比例
device-aspect-ratio 基于设备屏幕的宽高比
color 颜色的位数，如min-color：32 匹配设备是否有32位或以上的颜色
color-index 设备的颜色索引表中的颜色数
monochrome 检测单色振缓冲区中每像素使用的位数。为非负数，如monochrome：3
resolution 检测屏幕或打印机的分辨率，如min-resolution：300dpi(dpi后面会介绍)，也可以是每厘米像素点的度量值，如min-resolution：120dpcm
scan 扫描方式，值为progressive(逐行扫描)、interlace(隔行扫描)
grid 检测输出设备是网格设备还是位图设备
创建媒体查询时，上述特性(scan和grid不行)都可以加上min和max前缀创建媒体查询的范围。除了link标签能够进行媒体查询，是不是还有其它的呢，答案是Yes 。html中的meta标签，此前我们常用的应该是这个
但是现在我们要说的不是这个，而是这个：
在多数ios和android设备的浏览器都支持viewport meta元素覆盖默认的画布缩放设置。在标签中插入meta标签，设置相应属性即可，如上代码，name=”viewport” content中device-width表示浏览器页面宽度等于设备宽度(同理可以设置高度，也可指定具体值)，initial-scale=1表示页面不缩放保持，mininum-scale=1和maximum-scale=1表示允许用户最小缩小至原大小和扩大到原大小(实际就是不让缩放^^)，user-scaleable=no 表示禁止缩放, target- densitydpi = high-dpi表示适配高分辨率的屏幕，还可以取值为dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi，后面的四个定性，第一个定量，即dpi_value是DPI值，device-dpi是使用设备原本的 dpi 作为目标 dp，不发生默认缩放，而后面的三个是指dpi取值在一定范围的表示。这里我们先介绍前文出现过的一个名词dpi，所表示的是每英寸所拥有的像素(pixel)数目，数值越高，即代表显示屏能够以越高的密度显示图像。当达到人眼的极限分辨率时，乔帮主给它取了一个很高端的名字——Retina。那么目前市面的手机分辨率是怎样的一个分布呢，ios大家都知道的，从iphone4时代开始就已经是Retina屏了，至于Android可以看下此前Google官方公布的数据：
从上面可以看出，高分屏和超分屏已经是主流了，具体的适配范围还是看各自的项目和定位吧。
