新浪微博移动端开发的那些事

　　说实话，我们这次开发移动端的项目，整个项目组的人都是第一次，最初立项的时候为是选择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中width=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官方公布的数据：

　　从上面可以看出，高分屏和超分屏已经是主流了，具体的适配范围还是看各自的项目和定位吧。

　　讲了这么多，有人可能会疑惑为什么这些都不是用在css中的?别急，慢慢来，现在就介绍如何在样式中运用，按照上述屏幕分辨率的四种划分，我们可以看到基本可以舍弃ldpi了。

　　/* 中分辨率屏幕 */

　　/*高分辨率屏幕*/

　　/*超高分辨率屏幕(传说中的retina屏)*/

　　上面就是在css中的用法，把我们需要的css代码包含在大括号中就能用了，是不是很方便的样子%>_