广州web培训
达内广州五羊中心

18589266248

热门课程

【html5】移动终端开发的相关知识

  • 时间:2016-08-23 21:24
  • 发布:广州web培训
  • 来源:达内新闻

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

一、基本概念

(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要高一点点。

上一篇:交互设计师怎样理解信息架构?
下一篇:【HTML5】理解响应式布局设计本

马上预约三天免费体验课

姓名:

电话:

达内web培训:电子商务云平台前端开发

Intel英伟达等也转向AI战场

红包店与收钱码谁的招数好?

支付宝蚂蚁森林航拍种树公益活动

选择城市和中心
江西省

贵州省

广西省

海南省