Javascript Question

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.

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






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?

sb9 sb9
Answer Source

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 (853 * 1.5 = 1280 and 1280 * 1.5 = 1920). Switch Windows' zoom factor to 100% in Control Panel and your browser will return width and height as expected.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download