28

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!

stackunderflow
  • 3,811
  • 5
  • 31
  • 43
  • 1
    How about using [Media queries](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries) instead? – Teemu May 12 '14 at 10:05
  • 4
    I really hate and abhor and detest the downvoters who don't justify why? – stackunderflow May 13 '14 at 10:54
  • 4
    Don't understand why anyone would vote this down. I, too, need to know actual screen dimensions and resolution (PPI) for an application. Can't see how to use media queries for that. By my understanding media queries can make conditional CSS choices but that doesn't tell you actual resolution, for instance. That said, if the CSS engine is able to know if resolution is greater or less than some number it has a way to know what the actual resolution is. We should be able to access the same info, but HOW??? – Scott Witte Apr 27 '15 at 00:20

2 Answers2

31

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

Pete
  • 57,112
  • 28
  • 117
  • 166
  • 1
    Your answer is excellent and I will accept it, but the jsfiddle gave me inaccurate numbers regarding my screen size – stackunderflow May 13 '14 at 10:53
  • I wonder if `screen.width` is different for mobile / tablets as it seems to work for most desktops – Pete May 13 '14 at 10:58
  • My mobile is LG G2 , fiddler gave me 3.75 × 6.1666666, I measured it manually it is ~2.8 × 4.5, however I like the concept you gave me – stackunderflow May 13 '14 at 11:22
  • It's pretty accurate for both my cinema display, secondary display, and retina macbook. – MrGood Feb 18 '16 at 22:30
  • I used this method and found it was not correct on an iPad Pro because the window.screen.{width,height} are reported to be half the size of the window.{innerWidth, innerHeight}. If I base the calculation on the window.inner{Width,Height} I get a reasonable estimate of the physical screen dimensions for iPad devices. It overestimates iPhone physical dimensions by about 33%. – jptknta May 13 '16 at 18:58
  • I am not sure but i think a more accurate `width` and `height` in `inches` can be derived by dividing the values achieved by the calculation above by `window.devicePixelRatio`. Please correct me if I am wrong – Arup Hore Apr 03 '17 at 14:27
  • @ArupHore window.devicePixelRatio shows the amount of rendered pixels devided by the amount of pixels the device actually has. It holds no reference to physical screen dimensions in inch/cm. – Puddingboy Jun 16 '17 at 10:07
  • 5
    CSS sizing in absolute units (inch / centimeter) is only supported on printers -- the spec also states that they should correspond to their real-world counterparts on "high resolution displays" but we definitely have those in 2018, and they definitely don't actually line up in practice. – Coderer Mar 28 '18 at 12:02
  • @Coderer that is interesting. Perhaps when the spec says "corresponds to" it means something other than "exactly match". I am finding this solution to be loosely accurate. As for why it's not exactly accurate is a mystery still. – DAG Jan 21 '20 at 15:39
  • This solution was written 6 years ago and is most likely out of date for todays mixture of displays – Pete Jan 21 '20 at 15:40
  • For 2020 I think the latest W3C comments on this are here: https://www.w3.org/TR/css-values-4/#absolute-lengths – DAG Jan 21 '20 at 15:46
  • If you find that they're "loosely accurate" then you might just have not tested enough browser / device / display combinations. This was definitely all over the place when I wrote that comment almost 2 years ago, though I don't remember which devices I tested. – Coderer Jan 21 '20 at 16:13
  • 4
    Sorry this is still not looking good. My 2019 MacBook Pro with the 15" screen states the browser window's x/y is 17.5/10.9375 - not even close. – Raymond Naseef May 29 '20 at 04:52
  • 1
    This returns the wrong answer as it is based on resolution! it recognized my 24-inch monitor and 42-inch tv the same! – Mohammad Moallemi Dec 22 '20 at 22:08
  • VM191:1 Uncaught TypeError: Cannot read properties of null (reading 'offsetWidth') at :1:43 – G M Oct 27 '21 at 14:50
  • It's working but 18 times slower, avoid using this as much as – Đức Lê Công Apr 30 '23 at 11:35
  • There are cases where the browser cannot know the screen size. One example: the screen is a data projector, and the physical size of the screen depends on the distance from the data projector to the screen. That distance (and hence the actual screen size) is unknown both to the data projector, and the computer. Another example: the display is mirrored to 2 screens, of different sizes (e.g. laptop mirroring to a big-screen TV) – Diarmid Mackenzie May 21 '23 at 16:32
2

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

Kyle Wilson
  • 51
  • 5