Enter RawXDPI and RawYDPI
Windows 8.1 introduces Windows.Graphics.Display.DisplayInformation.RawXDPI and RawYDPI. These ones are actually the droids you’ve been looking for. I can’t imagine trying to name this API, I’m surprised it’s not TheRealDPIPleaseStandup since so many of the other properties are so convincingly named.
Pixel density and logical pixels
RawDPI tells you how many native pixels there are in every physical inch. This would be cool, but apps may be zoomed in in order to automatically make things big enough to touch or read, so one of your CSS or XAML (logical) pixels might be several native pixels. So the first thing you need to calculate is the number of logical pixels in a physical inch.
var info = Windows.Graphics.Display.DisplayInformation.getForCurrentView(); var logicalPPI = info.rawDpiX / info.resolutionScale / 100;
How do I draw an inch
You can just start using that logicalPPI value right away. In this case I’ll just make a DIV an inch wide.
// Resize the div to be an inch square inchDiv.style.width = logicalPPI + "px"; inchDiv.style.height = logicalPPI + "px";
How big is the screen
If you want to figure out the size of the screen’s diagonal, just dust off a little high school math.
var screenSizeX = window.screen.width / logicalPPI; var screenSizeY = window.screen.height / logicalPPI; var screenSize = Math.sqrt(Math.pow(screenSizeX, 2) + Math.pow(screenSizeY, 2));