stackunderflow stackunderflow - 5 months ago 115
jQuery Question

find screen dimensions in inches not pixels using javascript

I was reading many questions on SO regarding best ways to detect screen size in pixels which is ultimately dependant on resolution to find the actual screen size.

I know some mobile devices have small screen (say 4inch) yet the resolution is high. While some devices r having large screen (say 7inch tab) yet the resolution is low.

So when you want to display your page to the user, you really need the screen size in inches or centimetres to give the best view comforting the eyes.

So I ask:
Is there away to find out screen size of the device in inches not pixels ?
I know it can be, provided that we know the resolution! !Bec we can calculate the size from screen width and height

Appreciating any idea!

Answer

once you have got the screen resolution in pixels, you can work out the dpi with a hidden div:

<div id="dpi" style="height: 1in; width: 1in; left: 100%; position: fixed; top: 100%;"></div>

js

var dpi_x = document.getElementById('dpi').offsetWidth;
var dpi_y = document.getElementById('dpi').offsetHeight;

then work out the resolution in inches:

var width = screen.width / dpi_x;
var height = screen.height / dpi_y;

Example