移动端开发--物理像素和逻辑像素_在javascript中,可以使用window.devicepixelratio属性来获取设备的像素

作者：Cpp五条 | 2024-03-13 02:47:17

踩

在javascript中,可以使用window.devicepixelratio属性来获取设备的像素密度。

虽说在在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.device PixelRatio。

在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

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/227391