iOS is easy, because the pixel-ratio is always either 1 or 2, and the target dpi is always pixels/ratio. Android, however uses 1.3, 1.5, and in some cases 2.25 for a pixel-ratio. I'm not aware of any way to set the target dpi to pixels/ratio for android devices, which would be an easy fix, but I imagine a pixel-imperfect solution for any display whose physical pixel count is an odd multiple of it's dips count (those 1.3's, 1.5's etc).
Right now I'm basically writing css for each -webkit-min-device-pixel-ratio
, and just multiplying my px
values by that ratio manually (with slight adjustments for rounding). Using em
s works great for fonts and a few other things, but I have to use px
s for positioning and sizing of elements if I don't want half, empty, or overlapping pixels.
Is there a better way to do this?
If not, what is the best way to deal with background-images. I really don't want to have to re-write every single background-position for every icon for each ratio simply because I am changing the background-size
for each device-pixel-ratio
.