Search code examples
javascriptjqueryscreen-resolutionsurface-pro

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

monitor screen resolution

1920x1280 (Surface Pro 3) display (on Windows 10):

Surface Pro 3 display

Using $(window).height() on my 1920x1080 monitor, I get the following:

1080

That works for me.

However, using suggestions from this question for my 1920x1280 (Surface Pro 3) display...

Using $(window).height():

window

Using $(document).height():

document

Using screen.height:

screen.height

innerHeight/clientHeight

document.clientHeight

availHeight

innerHeight

winsize

  • 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):

testSizes

scrollHeight

Solution

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