移动端开发--物理像素和逻辑像素

虽说在在web app开发中,只需要掌握页面布局,页面适配,能够将页面完美在各种设备上展现。但是,为什么要这样做?这样做原理是什么?这么优点是什么?深究下去,大家不一定很清晰。

那么,咱们一起学习下~

一、2种像素

设备像素

设备像素是指设备中使用的物理像素,又称硬件像素

css像素

css像素是指css样式到吗中使用的逻辑像素。如果在一个设备中,硬件像素数与css像素数相等,将不会产生任何问题。但是,由于视网膜设备的出现,这两者之间的差异变得越来越大。硬件像素数与css像素数成为两种截然不同的像素。

例如在iphone 4设备屏幕中的物理像素是640px*960px,而css逻辑像素数为320*480px。因此,使用大约4个物理像素来显示一个css像素。

针对图像来说,web应用程序开发者们的目标是在尽量保证页面性能的前提下显示高质量的图片。

二、与像素相关的其他单位

什么是设备像素比(device pixel ratio)?

设备像素比是指设备像素与css像素之间的比例。当这个比率为1:1时,使用1个设备像素显示1个css像素。当这个比率为2:1时,使用4个设备像素显示1个css像素。当这个比率为3:1,使用9(3*3)个设备像素显示1个css像素。

什么是像素密度?

每英寸中多显示的像素数=ppi(pixels per inch)。在移动开发领域中,使用ppi来作为像素密度的单位。最近的移动设备中像素密度如下表所示。

像素密度与像素比之间的关系

虽然设备像素密度值越高,即每英寸中所显示像素数越多,设备屏幕中图像越清晰。但是设备像素密度值与设备像素比之间并没有直接关系。例如,在Galaxy S IV设备中,设备像素密度为441ppi,设备像素比为2,在HTC One设备中,设备像素密度为468ppi,设备像素比为3。

与设备像素比像素的dp像素与window.devicePixelRatio

Android设备中 独立于设备像素密度的dp像素

dp是创建Android应用程序时使用的一种独立与设备像素密度的像素单位。由于在160dpi(dots per inch:每英寸中显示的点数)的设备中,1px=1dp,因此在320dpi的设备中,1px=2dp,在480dpi的设备中,1px=3dp。

请注意:这个dp与前文所述设备像素比是两码事。

三、关于window.devicePixelRatio

Wikipedia网页中记载了各种设备的设备像素比,本文并不进行具体描述。这里我们只介绍一下window.devicePixelRatio。

在JavaScript脚本程序中,可以使用window,devicePixelRatio取得设备的设备像素比。

window.devicePixelRatio的注意点

另外,在使用window.devicePivelRatio的时候,有一下两点需要注意:

1. 在Firefox浏览器与IE浏览器中不支持window.devicePixelRatio。

2、在同一设备中的不同浏览器中的window.devicePixelRatio值有可能不同。

例如,在720*1200px的Galaxy Nexus设备中,在Android浏览器与Chrome浏览器中的window.devicePixelRatio值是2,在Opera浏览器中的window.devicePixelRatio值为2.25.由于在Android浏览器与chrome浏览器中的css像素数为360px在Opera浏览器中的css像素数为320px所以设备像素比的计算方式如下所示:

在Android浏览器与Chrome浏览器中

720 / 360 = 2

在Opera浏览器中

720/320 = 2.25

在iphone 5的Safari浏览器,Chrome浏览器与Opera浏览器中的设备像素比分别为2、2、1.

四、使用媒体查询表达式

为了在高分辨率设备中显示清晰的图像,可以使用某提查询表达式-webkit-device-pixel-ratio特性。接下来,我们首先对-webkit-device-pixel-ratio特性做一介绍,然后,介绍媒体查询表达式的resolution特性,最后,总结下如何为高分辨率设备使用媒体查询表达式。

-webkit-device-pixel-ratio

-webkit-device-pixel-ratio原本是针对苹果的视网膜设备进行开发时为了将设备像素转换成css像素时使用的一个媒体查询表达式特性,后来该特性在Android设备中得到了支持。 在Safari开发者说明中针对这一特性,有着如下所示的定义:

"-webkit-device-pixel-ratio":苹果设备中使用的特殊比例:2代表视网膜屏幕,1代表标准屏幕。在Safari 4.0以上浏览器中支持。

此处并没有对该比例进行详细说明,只说1代表标准屏幕,2代表视网膜屏幕。但是,在iphone 4中的device-pixel-ratio(设备像素比)为2,设备像素数为css像素数的2倍(640/320px),device-pixel-ratio=设备像素数/css像素数

Android设备中的-webkit-device-pixel-ratio

在Android设备开发者专用web网站中,针对-webkit-device-pixel-ratio有着如下所示的定义:

“在Android浏览器与WebView浏览器中,支持针对特定像素密度创建样式时所使用的-webkit-device-pixel-ratio。可指定值为0.75、1与1.5,分别代表低像素密度屏幕、中像素密度屏幕和高屏幕屏幕”。

原文链接http://html5online.com.cn/articles/2013041701.html

时间: 2024-10-03 22:47:37

移动端开发--物理像素和逻辑像素的相关文章

原 浅谈移动端开发--物理像素和逻辑像素

1.物理像素 设备像素,在同一个设备上,它的物理像素是固定的,这是厂商在出厂时就设置好了的,即一个设备的分辨率是固定的. 2.逻辑像素 CSS像素,viewport中的一个小方格,CSS样式代码中使用的是逻辑像素.如果在一个设备中,物理像素与逻辑像素相等,将不会产生任何问题.但是,在iphone 4中,物理像素是640px*960px,而逻辑像素数为320*480px.因此,需要使用大约4个物理像素来显示一个CSS像素. 3.像素比 物理像素与逻辑像素之间的比例.当像素比为1:1时,使用1个物理

CSS中的px与物理像素、逻辑像素、1px边框问题

一直不太清楚CSS中的1px与逻辑像素.物理像素是个什么关系(作为一名前端感觉很惭愧 -_-!),今天终于花时间彻底弄清楚了,其实弄清楚之后就觉得事情很简单,但也只有在弄清楚之后,才会觉得简单(语出<禅与摩托车维修艺术>,哈哈哈哈). 两种像素 物理像素:设备屏幕实际拥有的像素点.比如iPhone 6的屏幕在宽度方向有750个像素点,高度方向有1334个像素点,所以iPhone 6 总共有750*1334个物理像素. 逻辑像素:也叫"设备独立像素"(Device Indep

用一篇文章了解ppi,dpr,物理像素,逻辑像素,以及二倍图

这篇文章能让你了解到什么是分辨率.dpr.dip.ppi (dpi相当于ppi,dpi用点表示物理像素) 首先从最简单的ppi开始: 一部手机,有大有小,怎么知道手机的大小用尺子量一量即可,有两条边量哪一条呢?勾股定理告诉我们斜边越大,面积就越大,量斜边没跑了.量的单位可不是cm,而是英寸.1英寸= 2.54cm,这个相信看过<新华字典>或<现代汉语词典>的人都知道,上面附有计量单位表. 嘿嘿,又引出了一个物理像素的概念:物理像素就是分辨率的那两个数字,两个数字代表了长宽两条边物理

CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport

参照整理自:https://github.com/jawil/blog/issues/21 http://www.jianshu.com/p/af6dad66e49a px:px是一个相对单位,相对的是设备像素(device pixel)    margin:2px,这里的px是逻辑像素. ppi:每英寸多少像素数,放到显示器上说的是每英寸多少物理像素及显示器设备的点距. dpi:每英寸多少点. 也是根据物理像素的大小来决定的. 我们通常所说的显示器分辨率,其实是指桌面设定的分辨率,而不是显示器

移动端开发

1.pixel iphone5说自己是640*1136的屏,那么咱们在一个页面中写一个div是640*200px的样子,但是会超出,为什么?chrome调整时候会是320*568,为什么? 1.Retina屏 2.没设置<meta name="viewport" content="width=device-width,initial-scale=1.0"/> ipone5说自己是640宽意思是说的是物理像素,是固定的一个单位,多大就多大 但是咱们开发时说

移动前端适配—逻辑像素和物理像素

基础概念 dpi 每英寸所含有的像素点的个数. 物理像素 移动设备出厂时,就具备的分辨率,小米5 1920x1080 iphone6 1334x750 逻辑像素 Give your page a <meta name="viewport" content="width=device-width">, read out document.documentElement.clientWidth, and most browsers will give you

ViewPort,逻辑像素/设备独立像素,物理像素/设备独立像素,分辨率,CSS像素,设备像素比DPR,像素密度PPI。

一.相关基础知识 小米note参数查看:http://www.mi.com/minote/specs/ 以下都以小米note这个设备为例. 1.一般说手机的几寸是指:手机显示屏对角线的长度.1英寸2.54厘米.小米note为5.7英寸,约为14.478厘米. 2.物理像素/设备像素/像素:以一个很不严谨的方式去通俗的解释:这个屏幕是5英寸的,先把竖着等距画1919条线,这样横着看会有1920列,同理再横着画1079条线,竖着看会有1080行,这个过程中横线和竖线会相交,于是产生了一个个格子,这个

移动端开发系列——像素与viewport

目录 移动端开发的基本观点 像素基础知识 viewport原理解析 弹性布局 响应式设计 1rem的运用 移动端的事件 zepto库的使用 移动端开发的基本观点 移动端开发的意义移动端用户使用量 -> 市场需求 -> 市场供给 -> 公司需要移动端开发人才 -> 工资高,就业易 -> 涌现大波程序猿 -> 到了猴年马月,工资才会降下来 -> 新的技术涌现,VR/AI -> 市场需求攀升 -> 重走一波老路...... 扯远了,以上大致就是学习移动端开发

移动WEB开发--CSS像素、设备独立像素、设备像素之间关系

CSS像素.设备独立像素.设备像素,三者联系紧密又有很大的区别,而我们主要是在做移动端开发的时候需要更多地用到这些概念,那他们分别是指什么呢? 概念 CSS像素(CSS Pixel):适用于web编程,指的是我们在样式代码中使用到的逻辑像素,是一个抽象概念,实际并不存在 设备独立像素(Device Independent Pixel):与设备无关的逻辑像素,代表可以通过程序控制使用的虚拟像素,是一个总体概念,包括了CSS像素 设备像素(Device Pixel):物理像素,设备能控制显示的最小单