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

Question

澄清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 个硬件像素。

Answer 1

屏幕比例因子（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 转换可能会导致触摸区域与视图中元素的位置不匹配的问题。

Answer 2

我认为您可以将 device-width 与 min-device-width 和 max-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 您无法访问硬件像素。您可以将页面优化为不同的分辨率。

Answer 3

您可以使用：

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

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

Answer 4

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

获取100px宽的宽度div：

var myDivWidth = 100 / window.devicePixelRatio;

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

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

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

Access to hardware pixels on mobile devices

html

css

iphone

pixel

pixels