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 same 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.