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

Question

从此处澄清术语的信息.

硬件像素:显示器上的物理像素.例如,iPhone 5具有640个水平硬件像素的屏幕.

与设备无关的像素(倾角):设备像素的缩放以匹配正常观看距离处的均匀参考像素,其在所有设备上应该大致相同.iPhone 5的宽度为320 dips.

CSS pixel:用于视口控制的页面布局的单位.宽度:100px等样式的像素尺寸以CSS像素指定.CSS像素与设备无关像素的比率是页面的比例因子或缩放.

有没有办法在硬件像素和CSS像素之间设置关系,如1:1.

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

Answer 1

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

这听起来像你要做的是以"原生"分辨率驱动屏幕,这将使它看起来像2x或3x像素,但是(非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

我认为您可以使用带有和属性的设备宽度来访问硬件像素. - 描述输出设备的宽度.例如:min-device-widthmax-device-widthdevice-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中,您无法访问硬件像素.您可以将页面优化为不同的分辨率.