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

Question

信息从here澄清的术语。

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

设备无关像素（DIP）：装置中的像素的缩放以正常观看距离，这应该 近似上的所有设备相同的大小相匹配的统一基准像素。 iPhone 5的宽度为320下降 。

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

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

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

Answer 1

屏幕比例因子（视网膜，目前要么2倍或3倍）是从页的比例因子是不同的。在相同的页面比例因子下，取决于（视网膜）显示，1px将是1x1,2x2或3x3硬件像素。

这听起来像你要做的是以“原生”分辨率驱动屏幕，这将使它看起来像它有2倍或3倍的像素，但在（非视网膜）屏幕比例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：

为了得到一个100像素宽的div的宽度：

var myDivWidth = 100/window.devicePixelRatio; 

所以在iPhone 5的2.0 pixelRatio你将有超过100的50像素宽的div蔓延物理像素。

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