find screen dimensions in inches not pixels using javascript

javascript jquery screen
stackunderflow picture stackunderflow · May 12, 2014 · Viewed 12.6k times · Source

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

Pete picture Pete · May 12, 2014

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

Related questions

jQuery Screen Resolution Height Adjustment

In order to better balance out a page I am working on I would like to find a way to increase the top margin of a DIV depending on the screen resolution. What is my best way to set these …

Read More
Jquery Change Height based on Browser Size/Resize

I was wondering if there was a way to determine the height/width of a browser. What i'm trying to do is set a height on a div to 500px when the browser size is 1024x768, and for anything lower …

Read More
How do I redirect to another webpage?

How can I redirect the user from one page to another using jQuery or pure JavaScript?

Read More