1

I'm building a page that shows the user as much information about their device as possible. For mobile devices the physical resolution is not the same as the resolution interpreted by the browser, because otherwise high resolution devices would not display pages very well.

For example, my Moto X Style has a resolution of 1440 x 2560 pixels, which is even higher than most PC monitors. It is scaled down by the device pixel ratio, which is set to 3.5 on my device. this makes the 'interpreted resolution' 412 x 732 pixels

For many devices it would be sufficient to multiply the interpreted resolution of screen.[width/height] and multiply it by window.devicePixelRatio. However in my case this is only an estimate, and comes out at 1442 x 2562, presumably because of rounding.

Is there a surefire way to get this exact value? Or maybe suppress the rounding in these values? Any thoughts are appreciated.

Robbin Ploeger
  • 43
  • 2
  • 8

3 Answers3

1

Check out this page :

http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html

Apparently it changes per device, but you're on the right track with:

Math.round(screen.width||height*window.devicePixelRatio)

Best of luck.

blrzzzt
  • 194
  • 5
0

You can try this to get exact height width of current device

var w = window.innerWidth;
var h = window.innerHeight;
Kirankumar Dafda
  • 2,354
  • 5
  • 29
  • 56
  • 1
    These values do not equal to the screen size, but the window size. And if you had actually read my question you would have seen that i have already found the screen dimensions. – Robbin Ploeger May 26 '16 at 08:14
0

I use these to get the width/height of the window of the browser. 

getWindowWidth: function() {
    if (true) {
        try {
            return document.documentElement.clientWidth;
        } 
        catch (error) {}
    } 
    else {
        try {
            return window.innerWidth;
        } 
        catch (error) {}
    }
    return 0;
},

getWindowHeight: function() {
    if (true) {
        try {
            return document.documentElement.clientHeight;
        } 
        catch (error) {}
    } 
    else {
        try {
            return window.innerHeight;
        } 
        catch (error) {}
    }
    return 0;
},
PHPDev
  • 81
  • 5
  • Again, this doesn't really help me. In this case i think it's essential to use screen.width/height because that's the actual screen rather than the window/document dimensions. – Robbin Ploeger May 26 '16 at 08:26
  • You could get these `user_agent: navigator.userAgent.toLowerCase()` and `user_platform: navigator.platform.toLowerCase()` and compare them to a list of known devices. If you are using PHP or other, you could get the `$SERVER["HTTP_USER_AGENT"]` and compare that against a list. – PHPDev May 26 '16 at 08:51
  • here is a link http://www.useragentstring.com/pages/Mobile%20Browserlist/ to a long list of User Agents. – PHPDev May 26 '16 at 08:52
  • `screen.width` and `screen.height` – PHPDev May 26 '16 at 08:54
  • 1
    I'd rather not rely on such a list since there are so many different phones on the market. A list like that can't cover every phone. – Robbin Ploeger May 26 '16 at 09:02