Access to hardware pixels on mobile devices - html

Question

Information to clarify the terminology from 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.
Is there are any way to set relationship between Hardware pixel and CSS pixel like 1:1.
I mean if i want set my div's width to 100px, it will be exactly 100 hardware pixels even on Retina displays.

Answer 1

Screen scale factor (Retina, presently either 2x or 3x) is distinct from page scale factor. At the same page scale factor, 1px would be 1x1, 2x2, or 3x3 hardware pixels, depending on the (Retina) display.
It sounds like what you're looking to do is to drive the screen at a "native" resolution which would make it appear that it has 2x or 3x as many pixels, but at a (non-Retina) screen scale of 1.
To accomplish that, you'd have to transform the view by multiplying its size by the screen scale factor, while scaling it by the inverse of its screen factor.
You can set the head's <meta name="viewport" content="width=device-width-times-2, initial-scale=0.5"> but your content will be far less readable and sharp.
If you're looking to do this on an element basis, you can set
-webkit-transform-style: preserve-3d;
-webkit-transform: scale3d(0.5,0.5,0.5);
3d is necessary, as a 2d transformation may lead to issues with the touch area not matching up with the element's location in the view.

Answer 2

I think you can use device-width with min-device-width and max-device-width properties to access hardware pixels. device-width - describes the width of the output device. For example:
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { ... }
Here you can find a map of standard devices and media queries for them.
Also, you can setup media queries for different devices DPI you can use min-resolution property in media on this way:
#media print and (min-resolution: 300dpi) { ... }
To replace the old min-device-pixel-ratio syntax use this:
#media screen and (min-resolution: 2dppx) { ... }
Here is a source.
Basically, in clear CSS you can't get access to hardware pixels. You can just optimize pages to different resolutions.

Answer 3

You can use:
#media screen and (max-width: 300px) { /* To Do */ }
link visit: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 4

If you want the exact relationship I don't think you can do it in CSS.
But you can do it in JS :
To get the width of a 100px wide div :
var myDivWidth = 100 / window.devicePixelRatio;
So on an iPhone 5 with a pixelRatio of 2.0 you will have a 50px wide div spread over 100 physical pixels.
You could to the same with css transform:scale(0.5) if you want to shrink div content too.