Получить высоту Surface Pro 3 на веб-странице

Question

У меня есть монитор с разрешением 1920x1080 для моего ноутбука и Surface Pro 3 с разрешением 1920x1280. Я разрабатываю веб-страницу, предназначенную для полноэкранного просмотра на дисплеях 1920x1080 и 1920x1280.

Я подтвердил настройки для каждого дисплея (см. Ниже).

Почему я получаю 8xx вместо 1280? Как я могу получить значение 1280 для соответствия высоте разрешения Surface Pro 3?

---

1920х1080 монитор (на Windows 8):

1920x1280 (Surface Pro 3) дисплей (на Windows 10):

---

Использование $(window).height() на моем мониторе 1920х1080, я получаю следующее:

Это работает для меня.

---

Однако, используя предложения из this question для моих 1920x1280 (Surface Pro 3) дисплей ...

• Используя предложения от the accepted answer.

Использование $(window).height():

$(document).height() Использование:

Использование screen.height:

• Используя предложение от this answer:

• Используя предложение от this answer:

• Используя предложение от this answer:

• Используя предложение от this answer и this answer и this answer:

• Используя это предложение от this answer:

• This suggestion является самостоятельной рекомендацией плагина. На этом я перейду.

• This suggestion использует раствор для кофе. На данный момент я буду придерживаться JavaScript и jQuery.

• Используя это предложение от this answer (который извергает несколько других ответов):

• This suggestion требует внешней библиотеки. На этом я пока перейду.

• Используя предложение от :

• This suggestion был включен в несколько других ответов выше.

---

Answer 1

кажется, что ваш Surface Pro 3 использует широкий коэффициент масштабирования операционной системы - 150%. Благодаря этому браузер возвращает ширину 1280 и высоту 853 (как 1280 * 1,5 = 1920 и 853 * 1,5 = 1280). Переключите коэффициент масштабирования Windows на 100% в панели управления, и ваш браузер вернет ширину и высоту, как ожидалось.

Answer 2

1) Как я могу получить значение 1280, чтобы соответствовать высоте разрешающих поверхностей Pro 3?

Вы пробовали

window.outerHeight 

еще?

Все, что я вижу в ваших тестовых случаях, является внутренним. Вот только показывая вам, что браузер отображает (пиксели будут увеличены, и т.д .. уменьшение доступной ширины вы на самом деле есть)

2) Почему я получаю 8xx вместо 1280?

В основном, браузеры будут увеличивать текст/изображения/и т. Д., Чтобы обеспечить последовательный опыт в нескольких разрешениях. Даже если вы создаете его для экрана 1280, у вас может быть только 8xx пикселей.

Для получения дополнительной информации о pixeling I совет вы прочтете:

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

Answer 3

В браузере вы имеете дело с абстракцией CSS пикселей, а не с физическими пикселями. Размер, о котором сообщается вам, скорее всего правильный (если в игре нет странной ошибки браузера), поэтому высота окна равна 853 CSS-пиксели.

Моим советом было бы работать с такими размерами. Отрегулируйте макет с помощью мультимедийных запросов и т. Д. Не пытайтесь вторгаться в браузер; не оптимизируйте аппаратные особенности, которые производители браузеров и веб-стандарты активно пытаются скрыть от вас.

(я попытаюсь расширить этот ответ позже, если у меня есть время. Правильное объяснение понятий длина блога.)

Answer 4

Вот решение, которое работало для меня в Firefox, Chrome, IE11 и Edge. У меня нет Mac для тестирования, но это тоже должно работать. Вы должны учитывать коэффициент пикселя устройства. Вот пример (JSBin):

var screenHeight = window.devicePixelRatio * screen.height; 

Это даст вам размеры экрана, независимо от DPI устройства.

Важно отметить, что innerHeight (размер окна без интерфейса браузера) и outerHeight (размер окна с пользовательским интерфейсом браузера) относятся к окну браузера. Вы должны использовать их вместо screen.height, если хотите узнать размер окна браузера.