移动开发那些事.pdfVIP

移动开发那些事 说实话 ，我们这次开发移动端的项目 ，整个项目组的人都是第一次 ，最初立项的时 为是选 择nat ive app和web app还争论了一番 ，最后综合考虑 ，我们选择了web （我们选择了h5 ）开发。但 从这两种开发模式的特点来说 ，从它们诞生之日起就开始了不断的争论 ，孰好 孰坏 ，本文不作探讨 ，只是简单罗列下本人开发遇到的问题和最终的解决方案。 1. 响应式web设计 说到这个 ，移动开发面对的屏幕尺寸那叫一个丰富 ，其中安卓阵营就够让人头痛的。我们在PC端常 用的两种布局方式就是固定布局和弹性布局 ，前者设置一 个绝大多数电脑能正常显示的固定宽度居 中显示 ，后者则采用百分比。关于这两者讨论的文章很多 ，有兴趣的自己查阅下 ，我今天要介绍的 就是相信你已经听过的 “响应式布局” ，响应式布局意味着媒体查询 ，这个在css2就已经出现的东西 随着ht ml5、css3的到来又增添了新的生机。 响应式web设计并非新的技术 ，只不过将已有的开发技巧 （弹性布局、弹性图片和媒体查询等 ）整 合在了一起 ，并命了这个听起来很牛X 的名字——响应式web设计。犹如当年的Ajax一样 ，将已有 的技术重新组合发挥新的作用。 （1 ）.媒体查询初探。媒体查询并非新出现的技术 ，如下 ： 其中就使用了媒体查询 ，通过 标签的media属性为样式表指定了设备类型 ，当然CSS3时代的媒体 查询更加丰富。 发现了他们的区别吗 ？对 ，不只是针对设备进行适配 ，而且加了一个条件 ，就是当设备纵向放置的 时 才匹配 ，咱们再看一个。 大家会发现我们又拓展了一个条件 ，对 ，就是当设备屏幕的宽度大于 60px才会加载st yle.css样式 文件。我们究竟有哪些特性是可以被探测到的呢 ？ 下面列了一部分供大家参考 （参考 自ht t p://www.w3.o rg/ht ml/ig/z h/w iki/CSS3媒体查询 ）： w idt h 视口宽度 height 视口高度 device-w idt h 设备屏幕的宽度 device-height 设备屏幕的高度 o rient at io n 检测屏幕处于横屏还是竖屏 aspect -rat io 基于视口的宽高比例 device-aspect -rat io 基于设备屏幕的宽高比 co lo r 颜色的位数 ，如min-co lo r ：32 匹配设备是否有32位或以上的颜色 co lo r-index 设备的颜色索引表中的颜色数 mo nochro me 检测单色振缓冲区中每像素使用的位数。为非负数 ，如mo nochro me ：3 reso lut io n 检测屏幕或打印机的分辨率 ，如min-reso lut io n ：300dpi(dpi后面会介绍) ，也可以是每 厘米像素点的度量值 ，如min-reso lut io n ：120dpcm scan 扫描方式 ，值为progressive （逐行扫描 ）、int erlace （隔行扫描 ） grid 检测输出设备是网格设备还是位图设备 创建媒体查询时 ，上述特性 （scan和grid不行 ）都可以加上min和max前缀创建媒体查询的范围。除 了link标签能够进行媒体查询 ，是不是还有其它的呢 ，答案是Yes 。ht ml中的met a标签 ，此前我们 常用的应该是这个 但是现在我们要说的不是这个 ，而是这个 ： 在多数ios和andro id设备的浏览器都支持view po rt met a元素覆盖默认的画布缩放设置。在标签中插 入met a标签 ，设置相应属性即可 ，如上代码 ，name=”view po rt ” co nt ent 中w idt h=device-w idt h表示 浏览器页面宽度等于设备宽度 （同理可以设置高度 ，也可指定具体值 ），init ial- scale= 1表示页面不 缩放保持 ，mininum-scale= 1和maximum-scale= 1表示允许用户最小缩小至原大小和扩大到原大小 （ 实际 就是不让缩放^^ ），user-scaleable=no 表示禁止缩放, t arget - densit ydpi = high-dpi表示适配 高分辨率的屏幕 ，还可以取值为dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi ，后面的四个 定性 ，第一个定量 ，即dpi_value是DPI值 ，device-dpi是使用设备原本的 dpi 作为目标 dp ，不发生