How to make a layout scale with CSS?

I have been trying to use difference units (%, em, pt) to make a layout scale across different DPIs. I tried changing the Windows DPI settings, but in each scenario the layout looked like the sam开发者_JS百科e size eventhough the whole system looked bigger. How do I make the layout to scale up and down respecting the DPI?

For example,

<p style="font-size: 1em;">Testing out</p>

Will not scale.

You need to calibrate the browser to match the DPI of the screen. Not all browsers will get it from the system DPI.

That said, don't. Most systems do not have their DPI correctly calibrated, so trying to do anything based on that is a waste of effort.

You will need to generate all your CSS from PHP, plus add a little JavaScript to calculate the user's DPI, which you can then use to scale pixel values.

This is how to do it:

<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>

<script type='text/javascript'>
dpi_x = document.getElementById('testdiv').offsetWidth;
dpi_y = document.getElementById('testdiv').offsetHeight;
</script>

(I took the code from this useful page)

All you need to do then is send these values to php and scale all css pixel values by either 96/dpi_x or 72/dpi_x, depending on what your inital designs are layed out for.