javascript - Get Height of Surface Pro 3 on web page - Stack Overflow

admin管理员组

文章数量:1426300

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

---

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

---

• javascript
• jquery
• screen-resolution
• surface-pro

Share Improve this question Follow edited Dec 11, 2017 at 22:26 CommunityBot 111 silver badge asked Feb 1, 2017 at 15:50 user5398447user5398447 7

• Possible duplicate of Get the size of the screen, current web page and browser window – Heretic Monkey Commented Feb 1, 2017 at 15:54
• @MikeMcCaughan I have tried every suggestion from the accepted answer to no avail. I'll update question with results from each said suggestion. – user5398447 Commented Feb 1, 2017 at 15:56
• There are 14 answers on that question. A duplicate does not mean only the accepted answer will work. – Heretic Monkey Commented Feb 1, 2017 at 15:58
• 1 @MikeMcCaughan I have incorporated a majority of those 14 answers (those that didn't require using a different script or an external plugin/library outside of JavaScript/jQuery). None of those suggestions answers why I get 8xx instead of 1280 on the Surface Pro 3. – user5398447 Commented Feb 1, 2017 at 16:38
• Please consider replacing the screenshots with correctly formatted code – hiy Commented Feb 5, 2017 at 11:27

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 2 +50

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

本文标签： javascriptGet Height of Surface Pro 3 on web pageStack Overflow