浅谈移动端开发--物理像素和逻辑像素
来源:互联网 发布:java架构师招聘 编辑:程序博客网 时间:2024/06/04 18:01
1、物理像素
设备像素,在同一个设备上,它的物理像素是固定的,这是厂商在出厂时就设置好了的,即一个设备的分辨率是固定的。
2、逻辑像素
CSS像素,viewport中的一个小方格,CSS样式代码中使用的是逻辑像素。如果在一个设备中,物理像素与逻辑像素相等,将不会产生任何问题。但是,在iphone 4中,物理像素是640px*960px,而逻辑像素数为320*480px。因此,需要使用大约4个物理像素来显示一个CSS像素。
3、像素比
物理像素与逻辑像素之间的比例。当像素比为1:1时,使用1个物理像素显示1个逻辑像素;当像素比为2:1时,使用4个物理像素显示1个逻辑像素。
4、CSS中的1px并不等于设备的1px
在CSS中一般使用px作为单位,在Web浏览器中CSS的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成一个错觉,那就是CSS中的像素就是设备的物理像素。但实际情况却并非如此,CSS中的像素只是一个抽象的单位,在不同的设备或不同的环境中,CSS中的1px所代表的设备物理像素是不同的。
在早先的移动设备中,屏幕像素密度都比较低,如iphone3,它的分辨率为320*480,在iphone3上,1个CSS像素确实是等于1个物理像素的。后来随着技术的发展,移动设备的像素越来越高,从iphone4开始,推出了所谓的Retina屏,分辨率提高了一倍,变成640*960,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多了一倍,这时,1个CSS像素是等于4个物理像素的。
5、实现真正的1物理像素
当viewport的属性initial-scale为1时,页面大小正常,但initial-scale为0.5时,页面被缩小了1倍,像素比为2:1的设备本来1个CSS像素宽度占2个物理像素宽度,缩小后的1个CSS像素宽度就只占1个物理像素,即实现了真正的1物理像素。
eg:border-width:1px并不是最小边框,浏览器可以显示的最小粒度比1px还要小。为什么会出现比border-width:1px更细的边框?
屏幕能够显示的最小粒度是1个物理像素,iPhone4的像素比为2,设置border-width:1px后,边框占了4个物理像素,如果能让边框的宽度为1物理像素,那么它就比1个CSS像素要细,这可以通过设置<meta name="viewport" content="width=device-width, initial-scale=0.5">。
- 浅谈移动端开发--物理像素和逻辑像素
- 移动端开发--物理像素和逻辑像素
- 移动端web页面知识小结之像素、物理像素、逻辑像素
- 怎么理解物理像素和CSS像素?
- 设备物理像素(设备像素) 设备逻辑像素(设备独立像素) 代码CSS像素 设备像素比 viewport深入理解
- 移动开发像素知识
- 移动web开发之像素和DPR
- 移动web开发之像素和DPR
- 移动web开发之像素和DPR
- 分辨率,PPi,DPI,DPR,物理像素,逻辑像素
- 关于移动段设备物理像素和css像素的一点研究
- 浅谈A4纸张和像素
- 移动端像素的深究
- 移动端一像素边框
- 移动端1像素实现
- 移动端一个像素问题
- 移动端1像素解决方案
- 像素和像素值
- 整理一下java5的新特性(引用了很多,都有原文链接)
- delphi 日志库log4D
- 神经网络用于数据降维
- 修改表结构
- [转]用linux下常用命令wget进行整站下载(递归下载至本地)
- 浅谈移动端开发--物理像素和逻辑像素
- 判断平面多边形的凹凸性
- c++并查集实现
- Eclipse 导出项目
- C#利用SqlDataAdapte对DataTable进行批量数据操作
- P与NP问题
- 一台电脑连接多个GitHub账号下的仓库
- Lexical scope and function closures in R
- linux 字符界面图形界面切换