CODEWITHSUNDEEP
androidcssimageretina-displaydpi
Dean J
Dean J

Reputation: 40358

Fractional CSS Pixel Sizes on High Resolution Displays

(I've seen this already; I do not believe this is a duplicate: Are the decimal places in a CSS width respected?)

I set the size of an object as follows:

.foo {
  height: 10.5px;
  width: 10.5px;
}

Normally, that rounds down; you can't use half a pixel.

That said, the latest Nexus 7 has 320dpi, and a CSS pixel on an Android device is defined as 160dpi. A 10px by 10px image is drawn on the Nexus 7 using 400 pixels, not 100.

So on high-pixel density devices - those where window.devicePixelRatio > 1.0 - are fractional pixels useful, or just discarded anyways?

(Thanks!)

Edit, for a somewhat real-world example.

I have a MacBook Retina. I have a image file that's 21x21 px. I want this to display on my retina without rescaling in any way; I want each pixel in the file to correspond to one pixel on the screen. CSS pixels aren't linked to hardware pixels, and 1 px in CSS corresponds to 4px (2 wide, 2 high) on a Retina display or Nexus 7/10.

I want to be able to specify the exact size of the image, so that it's not rescaled, and so that the page doesn't reflow once the image is loaded. I can do this by putting the image into an div that's set to 11x11, and having the image display as 100%, but that's adding an extra div, and I'm a touch OCD about page size.

Upvotes: 1

Views: 631

Answers (1)

Max McKinney
Max McKinney

Reputation: 1218

They are discarded.

I think I get what you are trying to achieve with the fractional pixels, but really the route you need to go is using higher resolution images for the higher density displays. That should do what you want, no?

I can't think of any reason you would ever need the fractional pixel, or anything similar to it.

That being said, fractional pixels don't work, but fractional percentages do.

.foo {
    height: 10.5%;
    width: 10.5%;
}

This will work and should do whatever you would need fractional pixels for (you would need to change the percentage obviously from the example).

Upvotes: 1

Related Questions