Question

I have a WebView that is formatted via a CSS file – I dynamically generate the HTML from within the app for this view, much like a web server does. The generated HTML references a static CSS file for formatting. I have an image formatting instruction such as:

img {
    width: 20px;
    height: 20px;
}

To make this device independent I’d like to use dip rather that px for the width and height measurements. I cannot figure out (nor find) how to specify dip as a unit in a css definition. I have tried “dp” and “dip”, neither of which worked. Can this be done?

I know that I can have multiple versions of the CSS file that are selected via a <“target-densitydpi=high-dpi”> type of selector but this means that I will have duplicate CSS files just for the ability to size images according to different device densities. Doable, but I’d prefer to be able to specify dip in the CSS file and have the WebView do the work for me.

Also doable would be to generate the inline style sheet in the HTML head and convert dip to px for the specific device but this then leads to a coupling between the CSS definition and the HTML generation code. Probably better than multiple CSS files (for my application), but it would be far nicer to just set dip in the CSS file and be done with it.

(My images are designed to allow resizing without artifacts for the range of screen densities that are currently supported)

Answer 1

What units are available in CSS are here:

http://www.w3.org/TR/css3-values/#lengths

There is no dp or dip, so I am not sure how you have gotten an idea such a unit such exist.

Instead, CSS spec says pixel sizes should be scaled to device relative sizes.

This is theory.

The practice is that you probably want to generate CSS dynamically to support such feature.