三、开垦调节和测验 weinre远程实时调节和测量试验

首先,大家要下载weinre的jar包——项目官方已经找不到该jar文件,英特网能够找到,这里提出搭建个独立的web服务器,jar运营后是多个地面包车型大巴服务器,和web服务器比很多~~

在供给调理的页面参预中以下脚本:

上述正是大家在实质上开销中储存的黄金年代部分经验和本事,希望能够给我们有个别相助,即使您有好的方法大概工具,也请在留言中享受~~Source:tencent

输入debug client user
interface地址。本例中即:
id:anonymous。 运转的weinre调节和测验客商端ui如下图:

在此种方案中,大家使用
target-densitydpi=device-dpi,那样一来,手提式有线电电话机设备就能够依据实际的像素数量来渲染,用标准的话来讲,就是1
CSS pixels = 1 device pixels。例如对于 640*960的 iphone,大家就能够做出
640*960的页面,在iphone上显得也不会有滚动条。当然,对于别的装置,也需制作分裂尺寸的页面,所以这种方案往往是选择媒体询问来做成响应式的页面。这种方案能够在特定的分辨率下通盘展现,不过随着要合作的不及分辨率越来越多,花销就越高,因为急需为每意气风发种分辨率书写单独的代码。上边举个大致的例证:

密度决定比例

由上海体育场面能够,PPI在120-160时期的无绳电话机被归为低密度手提式有线电话机,160-240被归为中密度,240-320被归为高密度,320以上被归为相当的高密度(Apple给了它二个权威的名字——retina)。

device pixels: 显示器幕的的眇小物理单位,每个dp包涵自身的颜色、亮度。

等值的 CSS
pixels在手提式有线话机显示器上占多大的岗位,那不是定位的,那有赖于非常多质量。经过深入分析和总括,我们能够得出那样一条公式:
1 CSS pixels = ^2 device pixels (^2是平方的意味,至于
devicePixelRatio是何许事物,后面会讲课) 。

访问localhost:8081,假诺见到如下的页面,表明weinre已经起步成功:

PPI/DPI

  • android SDK + Eclipse + ADT,依然多少有一点繁杂。

二、技术方案 简单冷酷

viewport的使用

合理折中

AVD模拟器调节和测量检验

此间首要行使fiddler和长间隔代理,达成手提式有线话机配host的操作,具体操作如下:

CSS pixels: 浏览器采纳的虚幻单位, 重要用于在网页上制图内容。

那几个密度对应着三个特定的缩放比例值,拿大家最熟稔的iphone4或4s来讲,它们的PPI是326,归于非常高密度的手提式有线电话机。当大家书写三个幅度为320px的页面放到iphone中体现,你会意识,它依旧是满宽的。那是因为,页面被默许放大了两倍,也便是640px,而iphone4或4s的宽,正是640px。

图中把高密度的黄金年代类圈起来,是因为那是android手机的总计数据,在境内安卓手提式有线电话机商场中,高密度的设施占了好多的市集占有率,那是很关键的有些,也是我们做安卓端webapp要注意的关键点。

先是,保障PC和活动设备在同一个局域网下;

viewport总共有5个属性,分别如下:

wap移动终端开发必备知识-Web前端之家。然后经过运转dos命令来运转它(请留神在你的微处理机上豆蔻梢头度设置有JDK)。运维命令如下,必要把门路改成你的实在文件地方:

#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);}}

我们总结PPI正是为了精通后生可畏部无绳话机设备是归于哪个密度区间的,因为分化的密度区间,对应着差异的暗中同意缩放比例,那是一个很主要的概念。

静态页面并不能够满足大家的要求,很多实效比方touch事件,滚动事件,键盘输入事件等,都亟需在实际的意况下测量检验,这个时候就必要使用模拟器。就疑似大家测验ie6相符,AVD模拟器能够类比于PC上的设想机,当我们要求测量试验某豆蔻年华一定的机型时,大家得以新建三个AVD,实行一文山会海的测量试验。不过使用AVD的前提是现已陈设好android的开支情状,那几个须求JDK

若果我们根据320px宽的布署性稿去制作页面,並且不做此外的装置,页面会暗中认可自动缩放到跟手提式无线电电话机荧屏相等的上升的幅度(那是出于
medium-dpi是target-densitydpi的默许值,和分歧密度对应分化缩放比例所主宰的,这一切都以移动器械自动达成的
)。所以这种建设方案,轻巧,无情,有效。但有二个沉重的老毛病,对于高密度和相当高密度的手提式有线电话机配备,页面会失真,并且密度越来越多,失真越厉害。

java -jar d:toolsweinre-jarweinre.jar –httpPort 8081 –boundHost
-all-
(httpPort是点名服务端口,boundHost参数表明能够使用IP采访,all参数代表扶植具备的host)。

当时你会发觉,用手提式有线电电话机上网,走的的确是PC上的fiddler,全部的乞请包都会在fiddler中列出来,合作willow使用,就能够兑现配host,以致是反向代理的操作。

手提式有线电话机上安装代理,代理IP为PC的IP地址,端口为8888。常常手提式有线电话机上得以直接设置代理,若无,可以去下载一个叫ProxyDroid的应用软件来落到实处代理的安装。

PC上开启fiddler,并在装置中勾选“allow remote computers to connect”

总结

Web开拓者平时利用Firefox的firebug也许Chrome的开拓职工作者具实行Web调节和测量试验,包蕴针对JavaScript,DOM成分和CSS样式的调治。可是,当我们目的在于为活动Web站点或采纳实行调节和测量检验时,那个工具就很难派上用途。

因为手机上不便于截图,我那边就用多少个浏览器窗口来展现效果,其实手提式有线电话机上的职能跟侧边是相近的。

最棒完美

,注意把localhost换来手提式有线电话机可以访谈的真正IP地址。当手提式有线话机访谈这一个页面时,weinre顾客端就能够检查测试到指标设备,然后就能够对它实行调整了。

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

手提式有线电话机抓包与配host

针对安卓设备绝大许多是高密度,部分是中密度的特色,我们可以运用三个折中的方案:大家对480px宽的设计稿举行还原,但是页面制却做成320px宽(使用background-size来对图片举行压缩),然后,让页面自动根据比例缩放。那样一来,低密度的手机有滚动条,中密度的无绳电话时机浪费一丝丝流量,高密度的无绳电电话机完美展现,相当的高密度的手提式无线电话机微微失真。这种方案的独特之处非常确定:只要求少年老成套设计稿,大器晚成套代码。

挪动道具的客户越多,每一天android手提式有线话机的激活量都已超过130万台,所以大家面向移动终端的Web应用软件也早先跟进了。本文主要介绍webapp的支赋予调度的连锁文化和经验

PPI,一时也叫DPI,所代表的是每英寸所兼有的像素数量,数值越高,即表示显示器能够以越高的密度呈现图像。(注:这里的像素,指的是device
pixels。)搞驾驭了PPI是什么样看头,大家就能够比较轻松理解PPI的计量办法了,大家须要首先算入手提式无线电话机显示屏的对角线等效像素,然后处以对角线(大家日常所说的手机荧屏尺寸正是说的无绳话机显示器对角线的尺寸),就足以拿到PPI了。正确的计算公示大家能够参见下图。相比风趣的是,根据公式总括出来的索尼爱立信4的PPI为330,要比苹果官方揭橥的326要高级中学一年级小点。

风流洒脱、基本概念 CSS pixels与device pixels

在PC上,大家得以很有益地配host,不过手提式有线电话机上什么配host,那是三个题材。

weinre便是一个声援大家在桌面来远程调节和测验运维在活动设备浏览器内的Web页面或利用的调弄整理工具。weinre是WEb
INspector REmote的简写,现在是Apache的一个开源项目,托管在github。

在此些属性之中,大家根本关怀target-densitydpi,那一个天性能够更换设备的私下认可缩放。medium-dpi是target-densitydpi的暗许值,假使大家显式定义target-densitydpi=device-dpi,那么设备就能够依据真实的dpi来渲染页面。打个举个例子说,一张320*480的图样,放在iphone4里面,默许是占满显示屏的,但倘若定义了target-densitydpi=device-dpi,那么图片只占显示屏的五分一,因为iphone4的分辨率是640*960。

上面将介绍如此在日常职业选择它。

相关文章

网站地图xml地图