Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

find screen dimensions in inches not pixels using javascript

Tags:

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!

like image 897
stackunderflow Avatar asked May 12 '14 10:05

stackunderflow


People also ask

How do I find my screen size in HTML?

Use window. innerWidth and window. innerHeight to get the current screen size of a page.

How do I find the dimensions of my screen?

The size of a desktop computer monitor is determined by physically measuring the screen. Using a measuring tape, start at the top-left corner and pull it diagonally to the bottom-right corner. Be sure to only measure the screen; do not include the bezel (the plastic edge) around the screen.

What is my screen resolution Javascript?

Answer: Use the window. screen Object You can simply use the width and height property of the window. screen object to get the resolution of the screen (i.e. width and height of the screen).

What function do you need to call to get the width of the screen Javascript?

Window Screen Available Width The screen. availWidth property returns the width of the visitor's screen, in pixels, minus interface features like the Windows Taskbar.


2 Answers

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

like image 184
Pete Avatar answered Sep 27 '22 22:09

Pete


Now, as far as I can tell there is no sure-fire way to accurately get the screen width of a device. Everything (including inches, 1in == 96px) is based in one way or another on screen resolution.

Now, I know this may not be the fix-all for everyone, but hopefully it helps a few people out there. It helped me, since I wanted my page to behave differently for mobile users, and my initial plan of attack was going to be based on screen size.

What I ended up doing was replacing the line

if (screen.height <= 768) 

with

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) 

As a disclaimer, I should also mention that this was from an answer that is a few years old now, so some devices may not be covered.

Source: https://stackoverflow.com/a/26577897/8082614

like image 26
Kyle Wilson Avatar answered Sep 27 '22 22:09

Kyle Wilson