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.
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.