《移动端WebApp开发必备知识》由会员分享，可在线阅读，更多相关《移动端WebApp开发必备知识（9页珍藏版）》请在金锄头文库上搜索。
1、移动端 WebApp 开发必备知识2013-09-04 09:35 佚名 站长之家 字号：T | T移动设备的用户越来越多，每天 android 手机的激活量都已经超过 130 万台，所以我们面向移动终端的 WebAPP 也开始跟进了。本文主要介绍 webapp 的开发与调试的相关知识和经验，以及给出几种可选的解决方案。 AD： 2014WOT 全球软件技术峰会北京站 课程视频发布 移动设备的用户越来越多，每天 android 手机的激活量都已经超过 130 万台，所以我们面向移动终端的WebAPP 也开始跟进了。本文主要介绍 webapp 的开发与调试的相关知识和经验，以及给出几种可选的解决
2、方案。一、基本概念（1） CSS pixels 与 device pixelsCSS pixels： 浏览器使用的抽象单位， 主要用来在网页上绘制内容。device pixels： 显示屏幕的的最小物理单位，每个 dp 包含自己的颜色、亮度。等值的 CSS pixels 在手机屏幕上占多大的位置，这不是固定的，这取决于很多属性。经过分析和总结，我们可以得出这么一条公式： 1 CSS pixels = （devicePixelRatio）2 device pixels （2 是平方的意思，至于 devicePixelRatio 是什么东西，后面会讲解） 。（2） PPI/DPIPPI，有时也叫
3、DPI，所表示的是每英寸所拥有的像素（pixel）数目，数值越高，即代表显示屏能够以越高的密度显示图像。（注：这里的像素，指的是 device pixels。）搞清楚了 PPI 是什么意思，我们就能很容易理解 PPI 的计算方式了，我们需要首先算出手机屏幕的对角线等效像素，然后处以对角线（我们平常所说的手机屏幕尺寸就是说的手机屏幕对角线的长度），就可以得到 PPI 了。准确的计算公示大家可以参照下图。比较有意思的是，根据公式计算出来的 iPhone 4 的 PPI 为 330，要比苹果官方公布的 326 要高一点点。同理，以 HTC G7 为例，480*800 的分辨率，3.7 英寸，算出来就
4、是 252 的 PPI。（3） 密度决定比例我们计算 PPI 就是为了知道一部手机设备是属于哪个密度区间的，因为不同的密度区间，对应着不同的默认缩放比例，这是一个很重要的概念。由上图可知，PPI 在 120-160 之间的手机被归为低密度手机，160-240 被归为中密度，240-320 被归为高密度，320 以上被归为超高密度（Apple 给了它一个上流的名字retina）。这些密度对应着一个特定的缩放比例值，拿我们最熟悉的 iphone4 或 4s 来说，它们的 PPI 是 326，属于超高密度的手机。当我们书写一个宽度为 320px 的页面放到 iphone 中显示，你会发现，它竟然是满
5、宽的。这是因为，页面被默认放大了两倍，也就是 640px，而 iphone4 或 4s 的宽，正是 640px。图中把高密度的一类圈起来，是因为这是 android 手机的统计数据，在国内安卓手机市场中，高密度的设备占了绝大多数的市场份额，这是很重要的一点，也是我们做安卓端 webapp 要注意的关键点。（4） viewport 的使用viewport 总共有 5 个属性，分别如下：在这些属性里面，我们重点关注 target-densitydpi，这个属性可以改变设备的默认缩放。medium-dpi是 target-densitydpi 的默认值，如果我们显式定义 target-density
6、dpi=device-dpi，那么设备就会按照真实的 dpi 来渲染页面。打个比方说，一张 320*480 的图片，放在 iphone4 里面，默认是占满屏幕的，但如果定义了 target-densitydpi=device-dpi，那么图片只占屏幕的四分之一（二分之一的平方），因为 iphone4 的分辨率是 640*960。二、解决方案（1） 简单粗暴如果我们按照 320px 宽的设计稿去制作页面，并且不做任何的设置，页面会默认自动缩放到跟手机屏幕相等的宽度（这是由于 medium-dpi 是 target-densitydpi 的默认值，和不同密度对应不同缩放比例所决定的，这一切都是移动
7、设备自动完成的 ）。所以这种解决方案，简单，粗暴，有效。但有一个致命的缺点，对于高密度和超高密度的手机设备，页面（特别是图片）会失真，而且密度越多，失真越厉害。（2） 极致完美在这种方案中，我们采用 target-densitydpi=device-dpi，这样一来，手机设备就会按照真实的像素数目来渲染，用专业的话来说，就是 1 CSS pixels = 1 device pixels。比如对于 640*960 的 iphone，我们就可以做出 640*960 的页面，在 iphone 上显示也不会有滚动条。当然，对于其他设备，也需制作不同尺寸的页面，所以这种方案往往是使用媒体查询来做成响应式
8、的页面。这种方案可以在特定的分辨率下完美呈现，但是随着要兼容的不同分辨率越多，成本就越高，因为需要为每一种分辨率书写单独的代码。下面举个简单的例子：（3） 合理折中针对安卓设备绝大多数是高密度，部分是中密度的特点，我们可以采用一个折中的方案：我们对 480px 宽的设计稿进行还原，但是页面制做却成 320px 宽（使用 background-size 来对图片进行缩小），然后，让页面自动按照比例缩放。这样一来，低密度的手机有滚动条（这种手机基本上已经没有人在用了），中密度的手机会浪费一点点流量，高密度的手机完美呈现，超高密度的手机轻微失真（超高密度的安卓手机很少）。这种方案的优点非常明显：只需
9、要一套设计稿，一套代码（这里只是讨论安卓手机的情况）。三、开发调试（1） weinre 远程实时调试Web 开发者经常使用 Firefox 的 firebug 或者 Chrome 的开发人员工具进行 Web 调试，包括针对JavaScript，DOM 元素和 CSS 样式的调试。但是，当我们期望为移动 Web 站点或应用进行调试时，这些工具就很难派上用场。weinre 就是一个帮助我们在桌面来远程调试运行在移动设备浏览器内的 Web 页面或应用的调试工具。weinre 是 WEb INspector REmote 的简写，现在是 Apache 的一个开源项目，托管在 github。下面将介绍如
10、此在日常工作使用它。首先，我们要下载 weinre 的 jar 包项目官方已经找不到该 jar 文件，网上能够找到，这里建议搭建个独立的 web 服务器，jar 运行后是一个本地的服务器，和 web 服务器差不多然后通过运行 dos 命令来启动它（请注意在你的电脑上已经安装有 JDK）。运行命令如下，需要把路径改成你的实际文件位置：访问 localhost:8081，如果看到如下的页面，说明 weinre 已经启动成功：输入 debug client user interface 地址（调试客户端 UI 地址）。本例中即：http:/localhost:8081/client/#anonymo
11、us，其中#anonymous 是默认的调试 id（debug id）。如果这个weinre 调试服务器只是由你一个人使用，那么你可以使用默认的 debug id：anonymous。 启动的 weinre调试客户端 ui 如下图：在需要调试的页面加入中以下脚本： ，注意把 localhost 换成手机能够访问的真实 IP 地址。当手机访问这个页面时，weinre 客户端就会检测到目标设备，然后就可以对它进行调试了。因为手机上不方便截图，我这里就用两个浏览器窗口来展示效果，其实手机上的效果跟右边是一样的。（2） AVD 模拟器调试静态页面并不能满足我们的需求，很多实际效果比如 touch 事件
12、，滚动事件，键盘输入事件等，都需要在真实的环境下测试，这时就需要用到模拟器。就像我们测试 ie6 一样，AVD 模拟器可以类比于 PC 上的虚拟机，当我们需要测试某一特定的机型时，我们可以新建一个 AVD，进行一系列的测试。不过使用 AVD 的前提是已经部署好 android 的开发环境，这个需要 JDK + android SDK + Eclipse + ADT，还是稍微有点繁琐。（3）手机抓包与配 host在 PC 上，我们可以很方便地配 host，但是手机上如何配 host，这是一个问题。这里主要使用 fiddler 和远程代理，实现手机配 host 的操作，具体操作如下：1.首先，保证
13、 PC 和移动设备在同一个局域网下；2.PC 上开启 fiddler，并在设置中勾选“allow remote computers to connect”3.手机上设置代理，代理 IP 为 PC 的 IP 地址，端口为 8888（这是 fiddler 的默认端口）。通常手机上可以直接设置代理，如果没有，可以去下载一个叫 ProxyDroid 的 APP 来实现代理的设置。4.此时你会发现，用手机上网，走的其实是 PC 上的 fiddler，所有的请求包都会在 fiddler 中列出来，配合 willow 使用，即可实现配 host，甚至是反向代理的操作。【编辑推荐】1. 四款免编程移动游戏开发引擎推荐 2. 20 个全面覆盖前后端势头最猛的开发者工具 3. 从 Web 开发中看出开发者的 6 个坏习惯 4. Android 开发项目经验 5. App 开发再现生机下的荒芜
