Get Height of Surface Pro 3 on web page

Question

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.

---

Answer 1

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.

Answer 2

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.

Answer 3

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.)

Answer 4

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