11

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.

Mark
  • 563
  • 4
  • 18
  • 1
    Why exactly do you want to do this instead of just using standard media queries and relative sizes for your elements? It may be possible using Device/UA sniffing or [High DPI media queries](https://css-tricks.com/snippets/css/retina-display-media-query/) and using that info to adjust the [viewport, scale and/or zoom](http://blog.teamtreehouse.com/thinking-ahead-css-device-adaptation-with-viewport) of the page. However, You should [check out this answer to a similar question](http://stackoverflow.com/a/21767407/675110) and stop this madness now. – IMI Aug 26 '15 at 18:25
  • Is this for a web based or native application? – IMI Aug 28 '15 at 17:27
  • I believe you are out of luck for web based projects, especially targeted at iOS devices. [There is at least one person out there trying to get this changed](https://www.w3.org/community/hardware-pixels/). – IMI Aug 28 '15 at 18:39
  • @IMI _I believe you are out of luck for web based projects_ - this is the reason I asked the question - make sure that it is impossible or to find a solution from a more experienced developer than I. – Mark Aug 28 '15 at 22:08

4 Answers4

11

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.

  • In order to do this the OP will likely need to use [Window.devicePixelRatio](http://caniuse.com/#feat=devicepixelratio) to calculate the proper width and scale. – IMI Aug 26 '15 at 20:22
  • Question is **Access to hardware pixels on mobile devices**. Sorry, but this is not the answer on my question. – Mark Aug 28 '15 at 09:46
  • 1
    @Mark - I believe that "Access to hardware pixels on mobile devices" is probably read as a title by most and "Is there are any way to set relationship between Hardware pixel and CSS pixel like 1:1" is read as your actual question. Do you want to set a relationship or Access? – IMI Aug 28 '15 at 12:06
  • @IMI - Through the access to hardware pixels I want to set this relationship. In other words, I want to get around things such as _Device-independent pixel_ and _scale factor_. – Mark Aug 28 '15 at 16:53
  • 1
    To determine the ratio of Physical Pixels to Device-Independent Pixels, you'll need access to `window.devicePixelRatio` in JavaScript or you can use the [DPR from Client Hints](https://github.com/igrigorik/http-client-hints/) on the back-end (relatively new browsers only). If you're looking to calculate the number of hardware pixels, you have to use JavaScript. Simply multiply the `window.devicePixelRatio` by the `screen.width`. If you're looking to adjust all elements on the page, use one of PetahChristian's method's. You just have to pass the devicePixelRatio into your HTML/CSS. – Benjamin Solum Aug 28 '15 at 20:39
5

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.

AleshaOleg
  • 2,171
  • 1
  • 15
  • 29
2

You can use: 

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

link visit: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Trần Anh Vũ
  • 104
  • 2
1

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.

Flunch
  • 816
  • 5
  • 17