find screen dimensions in inches not pixels using javascript
Question
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!
3 answers
solution1
20 ACCPTED 2014-05-12 10:14:50
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;
solution2
4 2018-02-07 05:37:42
Just tried the "width: 1in" solution. I displayed the resulting div. I measured it with a real ruler. It wasn't 1 inch on my desktop (Windows 7) nor on my phone (LG G4). On my desktop and phone, versions are: Chrome 64.0.3282.140 and FireFox 58.0.1.
On my phone the div is about 11/16 inch wide in both browsers. On my desktop the div is a little less than 17/16 inch in both browsers.
Maybe better than wild guesses, but not much.
The test file is:
<!doctype html> <html> <style> -ms-@viewport { width: device-width; initial-scale: 1; zoom: 1; } @viewport { width: device-width; initial-scale: 1; zoom: 1; } </style> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Test DPI</title> </head> <body style="margin: .5cm"> <h1 class=title>Test DPI 2</h1> <div style="width: 1in; height: 1cm;background-color:black"></div> </body> </html>
solution3
1 2018-03-26 17:14:04
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.