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

Question

来自here 的用于澄清术语的信息。

硬件像素：显示器上的物理像素。例如，iPhone 5 的屏幕具有 640 个水平硬件像素。

与设备无关的像素 (dip)： 设备像素的缩放以匹配正常观看距离处的统一参考像素，这应该 在所有设备上的大小大致相同。 iPhone 5 跌幅为 320 宽。

CSS 像素： 用于由视口控制的页面布局的单位。样式中的像素尺寸，例如 width: 100px 在 CSS 中指定 像素。 CSS 像素与设备无关像素的比率是 页面的比例因子或缩放。

有没有什么方法可以设置硬件像素和CSS像素之间的1:1关系。

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

Answer 1

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

听起来您想要做的是以“本机”分辨率驱动屏幕，这将使它看起来具有 2 倍或 3 倍的像素，但（非 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 */ }

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

Answer 4

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

获取 100px 宽 div 的宽度：

var myDivWidth = 100 / window.devicePixelRatio;

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

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