css pixels: 浏览器使用的抽象单位, 主要用来在网页上绘制内容
weinre就是一个帮助我们在桌面来远程调试运行在移动设备浏览器内的web页面或应用的调试工具weinre是web inspector remote的简写,现在是apache的一个开源项目,托管在github
(2) 极致完美
在这种方案中,我们采用 target-densitydpi=device-dpi,这样一来,设备就会按照真实的像素数目来渲染,用专业的话来说,就是1 css pixels = 1 device pixels比HTTP如对于 640*960的 iphone,我们就可以做出 640*960的页面,在iphone上显示也不会有滚动条当然,对于其他设备,也需制作不同尺寸的页面,所以这种方案往往是使用媒体查询来做成响应式的页面这种方案可以在特定的分辨率下完美呈现,但是随着要兼容的不同分辨率越多,成本就越高,因为需要为每一种分辨率书写单独的代码下面举个简单的例子:
访问localhost:8081,如果看到如下的页面,说明weinre已经启动成功:
user-scalable =[yes | no] ,
下面将介绍如此在日常工作使用它
(3) 密度决定比例
(2) ppi/dpi
,注意把localhost换成能够访问的真实ip地址当访问这个页面时,weinre客户端就会检测HTTP到目标设备,然后就可以对它进行调试了
如果我们按照320px宽的设计稿去制作页面,并且不做任何的设置,页面会默认自动缩放到跟屏幕相等的宽度(这是由于 medium-dpi是target-densitydpi的默认值,和不同密度对应不同缩放比例所决定的,这一切都是移动设备自动完成的 )所以这种解决方案,简单,粗暴,有效但有一个致命的缺点,对于高密度和超高密度的设备,页面(特别是图片)会失真,而且密度越多,失真越厉害
(3)抓包与配host
web开发者经常使用firefox的firebug或者chrome的开发人员工具进行web调试,包括针对JavaScript,dom元素和css样式的调试但是,当我们期望为移动web站Web开发基本信息点或应用进行调试时,这些工具就很难派上用场
这些密度对应着一个特定的缩放比例值,拿我们最熟悉的iphone4或4s来说,它们的ppi是326,属于超高密度的当我们书写一个宽度为320px的页面放到iphone中显示,你会发现,它竟然是满宽的这是因为,页面被默认放大了两倍,也就是640px,而iphone4或4s的宽,正是640px
viewport总共有5个属性,分别如下:
4.此时你会发现,用上网,走的其实是pc上的fiddler,所有的请求包都会在fiddler中列出来,配合willow使用,即可实现配host,甚至是反向代理的操作
}
等值的 css pixels在屏幕上占多大的位置,这不是固定的,这取决于很多属性经过分析和总结,我web技术们可以得出这么一条公式: 1 css pixels = (devicepixelratio)^2 device pixels (^2是平方的意思,至于 devicepixelratio是什么东西,后面会讲解)
输入debug client user interface地址(调试客户端ui地址)本例中即:HTTP://localhost:8081/client/#anonymous,其中#anonymous是默认的调试id(debug id) 启动的weinre调试客户端ui如下图:
#header {
@media screen and (- webkit -device-pixel-ratio:0.75) {
/* css for high-deWeb开发是什么nsity screens */
ppi,有时也叫dpi,所表示的是每英寸所拥有的像素(pixel)数目,数值越高,即代表显示屏能够以越高的密度显示图像(注:这里的像素,指的是device pixels)搞清楚了ppi是什么意思,我们就能很容易理解ppi的计算方式了,我们需要首先算出屏幕的对角线等效像素,然后处以对角线(我们平常所说的屏幕尺寸就是说的屏幕对角线的长度),就可以得到ppi了准确的计算公示大家可以参照下图比较有意思的是,根据公式计算出来的iphone 4的ppi为330,要比苹果官方公布的326要高一点点
}
这里主要使用fiddler和远程代理,实现配host的操作,具体操作如下:
移动设备的用户越来越多,每天anweb技术droid的激活量都已经超过130万台,所以我们面向移动终端的webapp也开始跟进了本文主要介绍webapp的开发与调试的相关知识和经验,以及给出几种可选的解决方案
然后通过运行dos命令来启动它(请注意在你的电脑上已经安装有jdk)运行命令如下,需要把路径改成你的实际文件位置:
图中把高密度的一类圈起来,是因为这是android的统计数据,在国内安卓市场中,高密度的设备占了绝大多数的市场份额,这是很重要的一点,也是我们做安卓端webapp要注意的关键点
由上图可知,ppi在120-160之间的被归为低密度,160-240被归为中密度,240-320被归为高密度,320以上被归为超高密度(apple给了它一个上流的名字——retiWeb开发基本信息na)
(4) viewport的使用
initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value ,
因为上不方便截图,我这里就用两个浏览器窗口来展示效果,其实上的效果跟右边是一样的
同理,以htc g7为例,480*800的分辨率,3.7英寸,算出来就是252的ppi
height = [ pixel_value |device-height] ,
#header { background:url (low-density-image.png);}
首先,我们要下载weinre的jar包——项目官方已经找不到HTTP该jar文件,网上能够找到,这里建议搭建个独立的web服务器,jar运行后是一个本地的服务器,和web服务器差不多~~
文章来源:HTTP://isux.tencent.com/blog
(1) css pixels与device pixels
(1) 简单粗暴
以上就是我们在实际开发中积累的一些经验和技巧,希望能够给大家一些帮助,如果你有好的方法或者工具,也请在留言中分享~~
三、开发调试
/* css for low-density screens */
(2) avd模拟器调试
#header { background:url (high-density-image.png);}
target- densitydpi = [ dpiHTML_value | device-dpi| high-dpi | medium-dpi | low-dpi] ” />
(1) weinre远程实时调试
java -jar d:toolsweinre-jarweinre.jar –httpport 8081 –boundhost -all- //(HTTPport是指定服务端口,boundhost参数说明可以使用ip访问,all参数代表支持所有的host)
总结
@media screen and (- webkit -device-pixel-ratio:1.5) {
静态页面并不能满足我们的需求,很多实际效果比如touch事件,滚动事件,键盘输入事件PHP等,都需要在真实的环境下测试,这时就需要用到模拟器就像我们测试ie6一样,avd模拟器可以类比于pc上的虚拟机,当我们需要测试某一特定的机型时,我们可以新建一个avd,进行一系列的测试不过使用avd的前提是已经部署好android的开发环境,这个需要jdk + android sdk + eclipse + adt,还是稍微有点繁琐
2.pc上开启fiddler,并在设置中勾选“allow remote computers to connect”
1.首先,保证pc和移动设备在同一个局域网下;
(3) 合理折中
在需要调试的页面加入中以下脚本:
在这些属性里面,我们重点关注target-densHTTPitydpi,这个属性可以改变设备的默认缩放medium-dpi是target-densitydpi的默认值,如果我们显式定义target-densitydpi=device-dpi,那么设备就会按照真实的dpi来渲染页面打个比方说,一张320*480的图片,放在iphone4里面,默认是占满屏幕的,但如果定义了target-densitydpi=device-dpi,那么图片只占屏幕的四分之一(二分之一的平方),因为iphone4的分辨率是640*960
device pixels: 显示屏幕的的最小物理单位,每个dp包含自己的颜色、亮度
针对安卓设备绝大多数是高密度,部分是中密度的特点,我们可以采用一个折中的方案:我们对480px宽的Web开发设计稿进行还原,但是页面制做却成320px宽(使用background-size来对图片进行缩小),然后,让页面自动按照比例缩放这样一来,低密度的有滚动条(这种基本上已经没有人在用了),中密度的会浪费一点点流量,高密度的完美呈现,超高密度的轻微失真(超高密度的安卓很少)这种方案的优点非常明显:只需要一套设计稿,一套代码(这里只是讨论安卓的情况)
3.上设置代理,代理ip为pc的ip地址,端口为8888(这是fiddler的默认端口)通常上可以直接设置代理,如果没有,可以去下载一个叫proxydroid的app来实现代理的设置
我们计算ppi就是为了知道一部设备是属于哪个密度区间的,因为不同的密度区间,对应着不同的默认缩放比例,这是一Web开发主要是做什么个很重要的概念
width = [ pixel_value |device-width ] ,
background:url (medium-density-image.png);
content=“
在pc上,我们可以很方便地配host,但是上如何配host,这是一个问题
二、解决方案
}
一、基本概念