High-resolution monitors are finally here. So you probably will get one attached to your desktop or notebook in nearest future. If so you may end with system having different monitors that will have different resolution. One with standard 96 dpi and another with, let’s say, 250 dpi.
And now Windows (v 8.1 and above) allows to set individual DPI settings on different monitors.
If your desktop is shared among these display you will probably want to move application windows from one desktop to another. But having two surfaces with different DPI settings will require your application to support dynamic DPI changes on the fly.
Sciter engine is getting support of such per window DPI starting v. 3.0.2.0. Here is what you will see sdk/samples/basics/test-system-font-and-dip.htm sample while moving Sciter demo window between monitors with different DPI:
In order your HTML/CSS UI play nicely with this feature you should use logical length units: dip (device independent pixel, 1/96 of inch), pt, mm, in, cm, etc. in your designs. Note that in Sciter 1px is a physical unit – it is always one physical pixel. In some cases (e.g. border widths) you may still want to use dimensions/sizes in physical pixels but that should be an exception indeed. And flex units are always the best choice when you need flexible layout adjustable to dynamic window sizes.
Note in the animation above that document loaded in sciter has three squares: 100px, 100dip and 100dip. Last square has also border defined in dips – when the window is moved to the left monitor (uses 125% scale) these rectangles are getting different sizes. So last two are proportional to the window size.