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

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 的宽度设置为 100 像素，即使在 Retina 显示器上，它也将正好是 100 个硬件像素。

Answer 1

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

听起来您想要做的是以“原始”分辨率驱动屏幕，这将使它看起来具有 2 倍或 3 倍的像素，但在(非 Retina)屏幕比例下1.

要实现这一点，您必须通过将其大小乘以屏幕比例因子来转换 View ，同时按其屏幕因子的倒数缩放它。

你可以设置头部的<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 转换可能会导致触摸区域与元素在 View 中的位置不匹配的问题。