Develop Reference

Reliably calculate accurate device resolution

Assuming window.devicePixelRatio and device-width are set by display manufacturers and could potentially return incorrect values, are there any other reliable ways to accurately calculate the resolution of the physical pixels on a display?
I'll use my phone (Samsung Galaxy S9+) as an example, in portrait it has:
a screen resolution of: 1,440 × 2,960
a device-width of: 412
a devicePixelRatio of 3.5
The width of the device in physical pixels can be calculated by: device-width * devicePixelRatio
412 * 3.5 ≠ 1440
I'm willing to believe any one of those values is wrong. Perhaps the width in physical pixels really is 1442, or maybe the device-width is actually 411.42857142857142857142857142857, or the devicePixelRatio is 3.4951456310679611650485436893204‬.
Either way something's not right, and I'm left wondering how often this inaccuracy occurs and if there's any way to work around the issue without having to fallback on a database of manually updated known device resolutions.

Get Height of Surface Pro 3 on web page

I have a monitor with 1920x1080 resolution for my laptop and a Surface Pro 3 with 1920x1280 resolution. I am developing a web page designed for full-screen viewing on 1920x1080 and 1920x1280 displays.
I have confirmed the settings for each display (see below).
Why am I getting 8xx instead of 1280? How can I obtain a value of 1280 to match the resolution height of the Surface Pro 3?
1920x1080 monitor (on Windows 8):
1920x1280 (Surface Pro 3) display (on Windows 10):
Using $(window).height() on my 1920x1080 monitor, I get the following:
That works for me.
However, using suggestions from this question for my 1920x1280 (Surface Pro 3) display...
Using suggestions from the accepted answer.
Using $(window).height():
Using $(document).height():
Using screen.height:
Using the suggestion from this answer:
Using the suggestion from this answer:
Using the suggestion from this answer:
Using the suggestion from this answer and this answer and this answer:
Using this suggestion from this answer:
This suggestion is a self-recommendation of a plugin. I will pass on this for now.
This suggestion uses a Coffee solution. I'll stick to JavaScript and jQuery for now.
Using this suggestion from this answer (which regurgitates a few other answers):
This suggestion requires an external library. I will pass on this for now.
Using the suggestion from this answer:
This suggestion was incorporated into a few other answers above.

It seems that your Surface Pro 3 uses an operating system wide zoom factor of 150%. Due to this the browser returns width 1280 and height 853 (as 1280 * 1.5 = 1920 and 853 * 1.5 = 1280). Switch Windows' zoom factor to 100% in Control Panel and your browser will return width and height as expected.

1) How can I obtain a value of 1280 to match the resolution height of the Surface Pro 3?
Have you tried
window.outerHeight
yet?
All I see in your test cases is the innerHeight.
That's only showing you what the browser will render(pixels will be zoomed, etc.. decreasing the available width you actually have)
2) Why am i getting 8xx instead of 1280?
Basically, browsers will zoom text/images/ etc.. to give a consistent experience across several resolutions.
Even though you are building it for a 1280 screen, you might only have 8xx pixels to your availability.
For more information about the pixeling I advice you read:
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

Here is a solution that worked for me in Firefox, Chrome, IE11, and Edge. I don't have a Mac to test on but this should work there too. You need to factor in the device pixel ratio. Here is an example (JSBin):
var screenHeight = window.devicePixelRatio * screen.height;
This will give you the screen dimensions regardless of DPI of the device.
An important thing to note is that innerHeight (size of window without browser UI) and outerHeight (size of window with browser UI) are relative to the browser window. You should use those instead of screen.height if you want to know the size of the browser window.

In the browser, you deal with the abstraction of CSS pixels, not with physical pixels. The size reported to you is most likely correct (unless there is a weird browser bug at play), so the height of the window is 853 CSS pixels.
My advice would be to work with that size. Adjust your layout with media queries etc. Don't try to second-guess the browser; don't optimize for hardware specifics which browser vendors, and web standards, are actively trying to hide from you.
(I'll try to expand this answer later on, if I have the time. A proper explanation of the concepts is the length of a blog post.)

What is the view port width, height and device pixel ratio for the devices Google Pixel and Google Pixel XL

I am developing a web site and want see how it works on Google Pixel and Google Pixel XL devices. As I don't have the access to those devices, I need to know the view port width, height and device-pixel-ratio of those devices.
I have tried searching on Google but still couldn't find anything useful. Latest Chrome also doesn't list those devices' sizes in developer tools.
It will be really helpful if anyone have the access to these devices can figure the required information out.

Both the Pixel and Pixel XL are listed to have a css pixel resolution of 411×731, with device-pixel-ratios of 2.6 and 3.5 respectively.
Source: https://material.io/devices/ which is a Google site.
That's odd though, considering most phones get more effective pixels as the screen size increases, rather than just blowing everything up bigger and getting a higher dppx (Dots Per Pixel).
That does jive with Lord Flash's screen capture from the smaller Pixel; but doesn't help to validate the Pixel XL. If someone could post a screen capture from the Pixel XL I could determine the scaling from that.

The normal Pixel has a Resolution of 1080 x 1920 pixels (~441 ppi pixel density)
The Pixel XL has a resolution of: 1440 x 2560 pixels
Here is also a screenshot of the normal one. Feel free to measure whatever aspect you want:

do you have the google pixel in hand?
load the page with JS code
var viewport = {
width : $(window).width(),
height : $(window).height()
};
alert(viewport.height);
alert(viewport.width);

Why isn't window.innerWidth returning the right value?

I am trying to solve the problem of using Javascript to determine the width of my browser's "window". I'm aware different people can mean different things in this context so to be specific I mean the area in green as in this post.
I've read the first two replies to that post and a number of other stackoverflow solutions to this problem, none of which I could get to work: I am using Firefox 27.0.1 with the window maximised on a monitor that is 1920 pixels wide. The scripts says my viewport is 1536 pixels wide. I expected 1920 (or something close).
Based on what I have seen, it seemed to me the simplest solution in my case was this code:
<html>
<head>
<script type="text/javascript">
function onAfterLoad() {
document.write('<p>Your viewport width is '+window.innerWidth+'</p>');
}
</script>
</head>
<body onload="onAfterLoad();">
</body>
</html>
At the time of writing this code is here. This also says my viewport is 1536 pixels wide when I think it should be 1920.
Where am I going wrong please?

For me this problem is a result of browser zooming.
Try control+scroll wheel to see if this changes the results your are getting.
If so see How to detect page zoom level in all modern browsers?

Check your viewport meta tag. It should be:
<meta name="viewport" content="width=device-width,initial-scale=1" />

I think you should try with jQuery Dimension Functions. Rather dealing with Javascript functions.
Most basics are
$(window).width() (to get the width of browser)
and
$(window).height() (to get the height of browser)
Hope this helps.

Firstly:
Are you sure that's your viewport width?
Do you want to get the width of the browser window or the whole screen?
If you want to get the width of the whole screen that's impossible in JavaScript.
Secondly:
Try this to get the width of the browser window:
function GetWidth()
{
var width = document.body.clientWidth;
document.write('<p>Your viewport width is '+width+'</p>')
}

If you configure for example Microsoft Windows 7 to display text 25% bigger, then Firefox reports your screen to be 1/1.25 times it's actual size. Which is exactly 1536 for actual 1920.
(Even rectangles in a canvas are drawn 25% too big then. Been there, gone mad.)

Solution for windows 11 machines
Go to Settings > Display > Scale & Layout, and change it to 100%,
Afterwards you should see the screen resolution as your code output,
Note: this is not recommended because you will experience difficult text size to read.
Explanation
Some systems like windows scale the app viewport, this is because of screen nowdays have denser pixels per inch value, so text will be small.
To get a deeper understanding, imagine a typical laptop screen width 14 inch that has a 1920 pixels on width.
if you set the font to be 20px, then your text will have the following size:
text-size-in-inch = font-size-in-pixel * screen-width-in-inch / screen-pixels.
So if you do the math it will be :
text-size-in-inch = 20 * 14 / 1920 = .1458333... inch.
So it's really very small, thus systems tends to scale these screens by 125%, which is, in your case, your screen width will be = 1920 / 125% = 1536 px
Recommendation
You should adapt your code to work with any screen resolution

You code works well for me. It says 1600 (I've got a 1600 x 900 screen).
Is your browser maximised when you call the code?
Maybe your resolution is 1536 x something and you've got your screen stretched? I'd check it out in your screen settings. Another way to try it is to open Chrome and the Devtools and then resize the browser. It will show you the browser window dimensions.

Getting correct device display width for Android (Nexus 7 Tablet) with Javascript

screen.width and .height should contain the screen resolution of a tablet in device pixels and should change when the orientation of the device changes (for reference, see http://www.quirksmode.org/mobile/tableViewport.html). However, for the Nexus 7 Android tablet, these values are always screen.width = 1280 and screen.height = 736, regardless of the orientation. The height of 736 allows for a 64 pixel status bar (actual screen height = 800 pixels).
It's easy enought to flip these values in portrait mode (window.orientation=== 0 || window.orientation=== 180), which gives width 736 and height 1280, but since the status bar stays at top, the correct values should be 800 x 1216.
Is there a generalized/best practice approach to getting the screen width in device pixels on Android devices such as the Nexus 7? I'm aware of window.outerWidth, but have noticed it is sometimes incorrect. Is the failure to swap the width and height when the orientation changes common to all Android devices?

I too am struggling with Nexus 7 screen dimisions, however you would be better off getting the actual browsers dimensions for the document or window, these adjust themselves to the orentation.
This website does a better job of explaining it http://responsejs.com/labs/dimensions/