访问移动设备上的硬件像素

Access to hardware pixels on mobile devices

澄清here中术语的信息。

Hardware pixel: A physical pixel on the display. For example, an iPhone 5 has a screen with 640 horizontal hardware pixels.

Device-independent pixel (dip): A scaling of device pixels to match a uniform reference pixel at a normal viewing distance, which should be approximately the same size on all devices. An iPhone 5 is 320 dips wide.

CSS pixel: The unit used for page layout controlled by the viewport. Pixel dimensions in styles such as width: 100px are specified in CSS pixels. The ratio of CSS pixels to device independent pixels is the page's scale factor, or zoom.

有没有办法设置硬件像素CSS像素之间的关系,如1:1。

我的意思是,如果我想将 div 的宽度设置为 100px,即使在 Retina 显示器上,它也将正好是 100 个硬件像素。

屏幕比例因子(Retina,目前为 2x 或 3x)与页面比例因子不同。在相同的页面比例因子下,1px 将是 1x1、2x2 或 3x3 硬件像素,具体取决于 (Retina) 显示器。

听起来您想要做的是以 "native" 分辨率驱动屏幕,这将使它看起来有 2 倍或 3 倍的像素,但在 (non-Retina) 屏幕比例为 1.

为此,您必须通过将视图的大小乘以屏幕比例因子来变换视图,同时按屏幕比例的倒数缩放它。

您可以设置标题 <meta name="viewport" content="width=device-width-times-2, initial-scale=0.5">,但您的内容的可读性和清晰度将大大降低。

如果您希望在元素基础上执行此操作,您可以设置

-webkit-transform-style: preserve-3d;
-webkit-transform: scale3d(0.5,0.5,0.5);

3d 是必要的,因为 2d 转换可能会导致触摸区域与视图中元素的位置不匹配的问题。

我认为您可以将 device-widthmin-device-widthmax-device-width 属性结合使用来访问硬件像素。 device-width - 描述输出设备的宽度。例如:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { ... }

Here 您可以找到标准设备和媒体查询的地图。

此外,您可以为不同的设备设置媒体查询DPI您可以通过这种方式在媒体中使用min-resolution 属性:

@media print and (min-resolution: 300dpi) { ... }

要替换旧的 min-device-pixel-ratio 语法,请使用:

@media screen and (min-resolution: 2dppx) { ... }

这里是source.

基本上,显然 CSS 您无法访问硬件像素。您可以将页面优化为不同的分辨率。

您可以使用:

@media screen and (max-width: 300px) { /* To Do */ }

link访问:http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

如果您想要确切的关系,我认为您无法在 CSS 中做到。 但是你可以在 JS 中做到这一点:

获取100px宽的宽度div:

var myDivWidth = 100 / window.devicePixelRatio;

因此,在像素比率为 2.0 的 iPhone 5 上,您将有一个 50 像素宽的 div 分布在 100 个物理像素上。

如果您也想缩小 div 内容,您可以使用 css transform:scale(0.5) 相同的方法。