移动设备用户越来越多，android手机每天激活量超过130万，所以我们移动端的WebAPP也开始跟进。本文主要介绍了webapp开发调试的相关知识和经验，并给出了几种可选方案。一、基本概念(一)CSS像素和设备像素CSS像素：浏览器使用的抽象单位，主要用于在网页上绘制内容。设备像素：显示屏的最小物理单位，每个dp都包含自己的颜色和亮度。等效的CSS像素在手机屏幕上占据多少并不固定，取决于很多属性。经过分析和总结，我们可以得出这样一个公式：1CSSpixels=(devicePixelRatio)^2devicepixels（^2表示正方形，至于devicePixelRatio是什么，后面会解释）。(2)PPI/DPIPPI，有时也称为DPI，表示每英寸的像素数。数值越高，显示屏的密度越高。（注：这里的像素指的是设备像素。）搞清楚了PPI是什么意思之后，我们就很容易理解PPI的计算方法了。我们需要先计算出手机屏幕的对角线等效像素，然后加上Diagonal（我们通常所说的手机屏幕尺寸就是手机屏幕对角线的长度），就可以得到PPI。准确计算公告可参考下图。比较有意思的是，根据公式计算出来的iPhone4的PPI为330，比苹果官方公布的326高了一点点。同理，以HTCG7为例，分辨率为480*800，分辨率为3.7英寸，可以算出PPI为252。(3)密度决定比例我们计算PPI，就可以知道手机在哪个密度范围内device属于，因为不同的密度范围对应不同的默认缩放比例，这是一个很重要的概念。从上图可以看出，PPI在120-160之间的手机属于低密度手机，160-240属于中密度手机，240-320属于高密度手机,320以上属于超高密度手机（苹果给的）。给它起了一个优雅的名字——视网膜）。这些密度对应于特定的缩放值。就拿我们最熟悉的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，图片只会占据四分之一的屏幕（halfOnesquare),因为iphone4的分辨率是640*960。2、解决方案（1）简单粗暴如果我们按照320px宽的设计稿做页面，不做任何设置，页面会默认自动缩放到和手机屏幕一样宽（这是因为medium-dpi是target-densitydpi的默认值是由不同的密度对应不同的缩放比例决定的，这些都是移动设备自动完成的）。所以这个解决方案，简单、粗暴、有效。但是有一个致命的缺点。对于高密度和超高密度的移动设备，页面（尤其是图片）会出现变形，密度越高，变形越严重。(2)极致完美在这个方案中，我们使用target-densitydpi=device-dpi，这样移动设备就会按照真实的像素数进行渲染。用专业术语来说，就是1个CSS像素=1个设备像素。比如640*960的iPhone，我们可以做一个640*960的页面，在iPhone上显示就不会出现滚动条了。当然，对于其他设备，也需要制作不同大小的页面，所以这种方案往往会使用媒体查询来制作响应式页面。这种方案可以在特定的分辨率下完美渲染，但是要兼容的不同分辨率越多，成本就越高，因为你需要为每个分辨率编写单独的代码。这是一个简单的例子：#header{background:url(medium-density-image.png);}@mediascreenand(-webkit-device-pixel-ratio:1.5){/*CSSforhigh-densityscreens*/#header{background:url(high-density-image.png);}}@mediascreenand(-webkit-device-pixel-ratio:0.75){/*CSSforlow-densityscreens*/#header{background:url(low-density-image.png);}}(3)合理折衷考虑到大部分Android设备都是高密度的，有些是中密度的，我们可以采用一个折中方案：我们恢复480px宽的设计稿，但是页面制作却变成了320px宽（使用背景-size缩小图片），然后让页面按比例自动缩放。这样低密度手机有滚动条（这种手机基本没人用），中密度手机会浪费一点流量，高密度手机完美呈现，超高-密度手机略有失真（超高密度的安卓手机很少见）。这种方案的优点非常明显：只需要一套设计稿和一套代码（这里只讨论安卓手机的情况）。3.开发调试(1)Weinre远程实时调试Web开发人员经常使用Firefox的firebug或Chrome的开发者工具进行Web调试，包括对JavaScript、DOM元素和CSS样式的调试。然而，当我们期望调试移动网站或应用程序时，这些工具却很难派上用场。Weinre是一个调试工具，可以帮助我们在桌面上远程调试在移动设备浏览器中运行的网页或应用程序。Weinre是WEbINspectorREmote的缩写，现在是Apache的一个开源项目，托管在github上。下面将介绍如何在日常工作中使用它。首先我们需要下载weinre的jar包——项目官方一直找不到jar文件，但是网上可以找到。这里推荐搭建一个独立的web服务器。jar运行起来后就是一个本地服务器，类似于web服务器~~然后运行dos命令启动它（注意你的电脑上已经安装了JDK）。运行命令如下，需要将路径改为自己的实际文件位置：java-jard:toolsweinre-jarweinre.jar–httpPort8081–boundHost-all-//（httpPort为指定的服务端口，boundHost参数表示可以使用IP访问，all参数表示支持所有主机）。访问localhost:8081，如果看到如下页面，说明weinre启动成功：输入debugclientuserinterface地址（debugclientUIaddress）。在这个例子中：http://localhost:8081/client/#anonymous，其中#anonymous是默认的调试标识（debugid）。如果这个weinredebugserver只有你自己使用，那么你可以使用默认的debugid:anonymous。启动后的weinre调试客户端ui如下图所示：在需要调试的页面添加如下脚本：，注意将localhost替换为手机可以访问的真实IP地址。当手机访问这个页面时，weinre客户端会检测到目标设备，然后就可以调试了。因为手机不方便截图，所以我这里用两个浏览器窗口来展示一下效果。其实在手机上的效果和右边的是一样的。(2)AVD模拟器调试静态页面不能满足我们的需求。很多实际效果如触摸事件、滚动事件、键盘输入事件等，都需要在真实环境中进行测试，这时候就需要模拟器了。就像我们测试ie6一样，AVD模拟器可以类比为PC上的虚拟机。当我们需要测试特定模型时，我们可以创建一个新的AVD并进行一系列测试。不过使用AVD的前提是已经部署好了android开发环境。这个需要JDK+androidSDK+Eclipse+ADT，还是有点繁琐。(3)手机抓包及主机配置在PC端我们可以轻松配置主机，但是在手机端如何配置主机是个问题。这里主要使用fiddler和remoteagent来实现对手机配置主机的操作，具体操作如下：1、首先保证PC和移动设备在同一个局域网下；2.在PC上打开fiddler，勾选“允许远程计算机连接”3.在手机上设置代理，代理IP为PC的IP地址，端口为8888（这是默认端口提琴手）。通常，代理可以直接在手机上设置。如果没有，可以下载一个叫ProxyDroid的APP来实现代理设置。4、这时候你会发现，当你用手机上网的时候，实际上是在PC上使用fiddler。所有的请求包都会在fiddler中列出来。配合willow使用，可以实现配置主机甚至反向代理的操作。综上所述，以上是我们在实际开发中积累的一些经验和技巧。我希望它能给你一些帮助。如果大家有好的方法或者工具，欢迎留言分享~~
