移动设备上访问硬件像素

Question

以下是来源于这里的术语澄清信息。

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

设备无关像素（dip）：一个缩放倍数，用于匹配正常观看距离下的统一参考像素大小，应在所有设备上大致相同。iPhone 5宽320个DIP。

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

是否有办法设置硬件像素和CSS像素之间的关系，例如1：1。

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

- Mark

---

为什么你要这样做，而不是使用标准的媒体查询和相对大小来调整元素？也许可以使用设备/UA嗅探或高DPI媒体查询，并使用该信息来调整页面的视口、缩放和/或缩放。然而，你应该查看类似问题的答案并立即停止这种疯狂的行为。请参考此答案：https://dev59.com/5mEi5IYBdhLWcg3wFooL#21767407 - IMI

这是用于基于Web还是本地应用程序？ - IMI

我认为对于面向iOS设备的基于Web的项目，你可能会很不幸。但是，至少有一个人正在努力改变这种情况（https://www.w3.org/community/hardware-pixels/）。 - IMI

@IMI_我相信你在网页项目方面运气不佳_这也是我提出问题的原因-确保它是不可能的，或者从比我更有经验的开发人员那里找到解决方案。 - Mark

Answer 1

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

听起来你想做的是以“本机”分辨率驱动屏幕，这会使它看起来有2倍或3倍的像素，但屏幕比例为1（非Retina）。

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

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

- user4151918

---

为了实现这一点，操作者可能需要使用Window.devicePixelRatio来计算正确的宽度和比例。 - IMI

问题是移动设备上访问硬件像素。抱歉，但这不是我的问题的答案。 - Mark

@Mark - 我认为“移动设备上访问硬件像素”可能被大多数人看作是一个标题，“是否有任何方法设置硬件像素和CSS像素之间的关系，例如1:1”则被视为你实际的问题。你想要设置一个关系还是访问？ - IMI

@IMI - 通过访问硬件像素，我想要设置这种关系。换句话说，我想要绕过诸如“设备独立像素”和“比例因子”之类的东西。 - Mark

要确定物理像素与设备无关像素的比率，您需要在JavaScript中访问window.devicePixelRatio或者在后端使用客户端提示中的DPR（仅适用于相对较新的浏览器）。如果您想计算硬件像素的数量，您必须使用JavaScript。只需将window.devicePixelRatio乘以screen.width即可。如果您想调整页面上的所有元素，请使用PetahChristian的其中一种方法。您只需将devicePixelRatio传递到您的HTML/CSS中即可。 - Benjamin Solum

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) { ... }

在这里，您可以找到标准设备和相应媒体查询的地图。

此外，您可以为不同设备的DPI设置媒体查询。您可以在媒体中使用min-resolution属性来实现这一点：

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

为了替换旧的 min-device-pixel-ratio 语法，请使用以下代码：

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

这里有一个源。

基本上，在纯CSS中，你无法访问硬件像素。你只能将页面优化为不同的分辨率。

- AleshaOleg

Answer 3

你可以使用：

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

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

- Trần Anh Vũ

Answer 4

如果你想要精确的关系，我认为你不能在CSS中实现。 但是你可以在JS中实现：

获取一个100px宽的div的宽度：

var myDivWidth = 100 / window.devicePixelRatio;

在具有2.0像素比率的iPhone 5上，您将在100个物理像素上展开50像素宽的div。如果您希望缩小div内容，可以使用css中的transform：scale（0.5）来实现相同的效果。

- Flunch