CODEWITHSUNDEEP
androidioscssmobilepixel-ratio
bearfriend
bearfriend

Reputation: 10431

How to write CSS for mobile cross-platform site

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 ems works great for fonts and a few other things, but I have to use pxs 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.

Upvotes: 0

Views: 333

Answers (1)

Cthulhufish
Cthulhufish

Reputation: 21

You can try using the viewport meta tag. It lets you match width to the device's width. It also allows you to set initial scaling, set bounds on scaling, or even disable scaling. And here is a link to a relevant Stack Overflow question and answer on using the meta viewport tag.

Upvotes: 0

Related Questions