Geek Answers Handbook

How to specify image size in webview css using dip?

I have a WebView that is formatted via a CSS file - I dynamically generate HTML from the application for this view, as the web server does. The generated HTML refers to a static CSS file for formatting. I have an image formatting instruction, for example:

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

To make this device independent, I would like to use dip, and instead px to measure width and height. I cannot understand (and cannot find) how to specify dip as a unit in the css definition. I tried "dp" and "dip", none of which worked. It can be done?

I know that I can have several versions of the CSS file that are selected using the selector type <"target-densitydpi = high-dpi">, but this means that I will have duplicate CSS files only for the possibility, depending on the density of the device. Doable, but I would rather be able to specify dip in the CSS file and make WebView work for me.

It would also be feasible to create an inline style sheet in the head of HTML and convert dip to px for a specific device, but this will lead to a connection between the CSS definition and the HTML generation code. Probably better than a few CSS files (for my application), but it would be much better to just skip the dip in the CSS file and do with it.

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

+8
android css webview
source share
2 answers

What units are available in CSS:

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

There is no dp or dip, so I'm not sure how you understood that such a unit exists.

Instead, the CSS specification says that pixel sizes should scale to relative device sizes.

This is a theory.

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

+2
source share

dp is actually located at / 160, so you can specify all sizes in units of length, such as inches or millimeters. Assuming proportion, of course.

But, unfortunately, the absolute sizes in css do not correspond to physical measures, I just checked .: (

+1
source share

More articles:


All Articles