移动端webapp开发必备知识

移动设备的用户愈来愈多，天天android手机的激活量都已经超过130万台，因此咱们面向移动终端的WebAPP也开始跟进了。本文主要介绍webapp的开发与调试的相关知识和经验，以及给出几种可选的解决方案。

1、基本概念

（1） CSS pixels与device pixels

CSS pixels： 浏览器使用的抽象单位， 主要用来在网页上绘制内容。

device pixels： 显示屏幕的的最小物理单位，每一个dp包含本身的颜色、亮度。

等值的 CSS pixels在手机屏幕上占多大的位置，这不是固定的，这取决于不少属性。通过分析和总结，咱们能够得出这么一条公式： 1 CSS pixels = （devicePixelRatio）^2 device pixels （^2是平方的意思，至于 devicePixelRatio是什么东西，后面会讲解） 。

（2） PPI/DPI

PPI，有时也叫DPI，所表示的是每英寸所拥有的像素（pixel）数目，数值越高，即表明显示屏可以以越高的密度显示图像。（注：这里的像素，指的是device pixels。）搞清楚了PPI是什么意思，咱们就能很容易理解PPI的计算方式了，咱们须要首先算出手机屏幕的对角线等效像素，而后处以对角线（咱们日常所说的手机屏幕尺寸就是说的手机屏幕对角线的长度），就能够获得PPI了。准确的计算公示你们能够参照下图。比较有意思的是，根据公式计算出来的iPhone 4的PPI为330，要比苹果官方公布的326要高一点点。

同理，以HTC G7为例，480*800的分辨率，3.7英寸，算出来就是252的PPI。

（3） 密度决定比例

咱们计算PPI就是为了知道一部手机设备是属于哪一个密度区间的，由于不一样的密度区间，对应着不一样的默认缩放比例，这是一个很重要的概念。

由上图可知，PPI在120-160之间的手机被归为低密度手机，160-240被归为中密度，240-320被归为高密度，320以上被归为超高密度（Apple给了它一个上流的名字——retina）。

这些密度对应着一个特定的缩放比例值，拿咱们最熟悉的iphone4或4s来讲，它们的PPI是326，属于超高密度的手机。当咱们书写一个宽度为320px的页面放到iphone中显示，你会发现，它居然是满宽的。这是由于，页面被默认放大了两倍，也就是640px，而iphone4或4s的宽，正是640px。

图中把高密度的一类圈起来，是由于这是android手机的统计数据，在国内安卓手机市场中，高密度的设备占了绝大多数的市场份额，这是很重要的一点，也是咱们作安卓端webapp要注意的关键点。

（4） viewport的使用

viewport总共有5个属性，分别以下：

content=“

height = ［ pixel_value |device-height］ ，

width = ［ pixel_value |device-width ］ ，

initial-scale = float_value ， minimum-scale = float_value ， maximum-scale = float_value ，

user-scalable =［yes | no］ ，

target- densitydpi = ［ dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi］ ” />

在这些属性里面，咱们重点关注target-densitydpi，这个属性能够改变设备的默认缩放。medium-dpi是target-densitydpi的默认值，若是咱们显式定义target-densitydpi=device-dpi，那么设备就会按照真实的dpi来渲染页面。打个比方说，一张320*480的图片，放在iphone4里面，默认是占满屏幕的，但若是定义了target-densitydpi=device-dpi，那么图片只占屏幕的四分之一（二分之一的平方），由于iphone4的分辨率是640*960。

2、解决方案

（1） 简单粗暴

若是咱们按照320px宽的设计稿去制做页面，而且不作任何的设置，页面会默认自动缩放到跟手机屏幕相等的宽度（这是因为 medium-dpi是target-densitydpi的默认值，和不一样密度对应不一样缩放比例所决定的，这一切都是移动设备自动完成的 ）。因此这种解决方案，简单，粗暴，有效。但有一个致命的缺点，对于高密度和超高密度的手机设备，页面（特别是图片）会失真，并且密度越多，失真越厉害。

（2） 极致完美

在这种方案中，咱们采用 target-densitydpi=device-dpi，这样一来，手机设备就会按照真实的像素数目来渲染，用专业的话来讲，就是1 CSS pixels = 1 device pixels。好比对于 640*960的 iphone，咱们就能够作出 640*960的页面，在iphone上显示也不会有滚动条。固然，对于其余设备，也需制做不一样尺寸的页面，因此这种方案每每是使用媒体查询来作成响应式的页面。这种方案能够在特定的分辨率下完美呈现，可是随着要兼容的不一样分辨率越多，成本就越高，由于须要为每一种分辨率书写单独的代码。下面举个简单的例子：

#header {

background:url （medium-density-image.png）;

}

@media screen and （- webkit -device-pixel-ratio:1.5） {

/* CSS for high-density screens */

#header { background:url （high-density-image.png）;}

}

@media screen and （- webkit -device-pixel-ratio:0.75） {

/* CSS for low-density screens */

#header { background:url （low-density-image.png）;}

}

（3） 合理折中

针对安卓设备绝大多数是高密度，部分是中密度的特色，咱们能够采用一个折中的方案：咱们对480px宽的设计稿进行还原，可是页面制作却成320px宽（使用background-size来对图片进行缩小），而后，让页面自动按照比例缩放。这样一来，低密度的手机有滚动条（这种手机基本上已经没有人在用了），中密度的手机会浪费一点点流量，高密度的手机完美呈现，超高密度的手机轻微失真（超高密度的安卓手机不多）。这种方案的优势很是明显：只须要一套设计稿，一套代码（这里只是讨论安卓手机的状况）。

3、开发调试

（1） weinre远程实时调试

Web开发者常用Firefox的firebug或者Chrome的开发人员工具进行Web调试，包括针对JavaScript，DOM元素和CSS样式的调试。可是，当咱们指望为移动Web站点或应用进行调试时，这些工具就很难派上用场。

weinre就是一个帮助咱们在桌面来远程调试运行在移动设备浏览器内的Web页面或应用的调试工具。weinre是WEb INspector REmote的简写，如今是Apache的一个开源项目，托管在github。

下面将介绍如此在平常工做使用它。

首先，咱们要下载weinre的jar包——项目官方已经找不到该jar文件，网上可以找到，这里建议搭建个独立的web服务器，jar运行后是一个本地的服务器，和web服务器差很少~~

而后经过运行dos命令来启动它（请注意在你的电脑上已经安装有JDK）。运行命令以下，须要把路径改为你的实际文件位置：

java -jar d:toolsweinre-jarweinre.jar –httpPort 8081 –boundHost -all- //（httpPort是指定服务端口，boundHost参数说明可使用IP访问，all参数表明支持全部的host）。

访问localhost:8081，若是看到以下的页面，说明weinre已经启动成功：

输入debug client user interface地址（调试客户端UI地址）。本例中即：http://localhost:8081/client/#anonymous，其中#anonymous是默认的调试id（debug id）。若是这个weinre调试服务器只是由你一我的使用，那么你可使用默认的debug id：anonymous。 启动的weinre调试客户端ui以下图：

在须要调试的页面加入中如下脚本： ，注意把localhost换成手机可以访问的真实IP地址。当手机访问这个页面时，weinre客户端就会检测到目标设备，而后就能够对它进行调试了。

由于手机上不方便截图，我这里就用两个浏览器窗口来展现效果，其实手机上的效果跟右边是同样的。

（2） AVD模拟器调试

静态页面并不能知足咱们的需求，不少实际效果好比touch事件，滚动事件，键盘输入事件等，都须要在真实的环境下测试，这时就须要用到模拟器。就像咱们测试ie6同样，AVD模拟器能够类比于PC上的虚拟机，当咱们须要测试某一特定的机型时，咱们能够新建一个AVD，进行一系列的测试。不过使用AVD的前提是已经部署好android的开发环境，这个须要JDK + android SDK + Eclipse + ADT，仍是稍微有点繁琐。

（3）手机抓包与配host

在PC上，咱们能够很方便地配host，可是手机上如何配host，这是一个问题。

这里主要使用fiddler和远程代理，实现手机配host的操做，具体操做以下：

1.首先，保证PC和移动设备在同一个局域网下；

2.PC上开启fiddler，并在设置中勾选“allow remote computers to connect”

3.手机上设置代理，代理IP为PC的IP地址，端口为8888（这是fiddler的默认端口）。一般手机上能够直接设置代理，若是没有，能够去下载一个叫ProxyDroid的APP来实现代理的设置。

4.此时你会发现，用手机上网，走的实际上是PC上的fiddler，全部的请求包都会在fiddler中列出来，配合willow使用，便可实现配host，甚至是反向代理的操做。

总结

以上就是咱们在实际开发中积累的一些经验和技巧，但愿可以给你们一些帮助，若是你有好的方法或者工具，也请在留言中分享~~

文章来源：http://isux.tencent.com/blog