Как определить разрешение экрана с помощью JavaScript?

Ответы:

297

оригинальный ответ

Да.

window.screen.availHeight
window.screen.availWidth

обновление 2017-11-10

От цунами в комментариях:

Чтобы получить собственное разрешение, т. Е. Мобильного устройства, нужно умножить его на соотношение пикселей устройства: window.screen.width * window.devicePixelRatioи window.screen.height * window.devicePixelRatio. Это также будет работать на настольных компьютерах, которые будут иметь соотношение 1.

И от Бена в другом ответе:

В ванильном JavaScript это даст вам ДОСТУПНУЮ ширину / высоту:

window.screen.availHeight
window.screen.availWidth

Для абсолютной ширины / высоты используйте:

window.screen.height
window.screen.width
Джон Уэлдон
источник
16
Это не совсем правильно сейчас. Не учитывает возможность изменения масштаба страницы.
sergzach
7
@sergzach - В этом случае я бы $(window).width()вместо этого использовал jQuery , см. ответ
chaim.dev
3
Используйте window.screen.height и window.screen.width, чтобы получить точный размер экрана (как предложено в следующем ответе). Причина, по которой вы не получаете точный размер, заключается в том, что он проверяет доступную ширину и высоту, это означает, что он вычтет высоту панели инструментов (которая составляет ровно 40 пикселей на окнах 7/8)
Jaruba
4
Не было бы лучше, чтобы разрешение экрана соответствовало window.screen.height и width? почему высота? например, мой utilWidth возвращает 1050, а на самом деле его 1080.
Малавос
5
@ eckes вы должны умножить с window.devicePixelRatio. См. Мой комментарий к ответу Алессандроса.
Цунами
49
var width = screen.width;
var height = screen.height;
Alessandro
источник
1
Это эквивалентно window.screen. Нужно просто добавить его к существующему ответу.
Gajus
3
На самом деле это правильный ответ. screen.availHeightпросто дает доступную высоту в окне браузера, а screen.heightдает точную высоту экрана.
apnerve
Это возвращает масштабированное разрешение в dpi, а не собственное разрешение экрана.
Доминик Черизано,
4
Чтобы получить собственное разрешение, т. Е. Мобильного устройства, нужно умножить его на соотношение пикселей устройства: window.screen.width * window.devicePixelRatioи window.screen.height * window.devicePixelRatio. Это также будет работать на настольных компьютерах, которые будут иметь соотношение 1.
Цунами
Настольные компьютеры не обязательно будут иметь соотношение 1.
12Me21
34

В ванильном JavaScript это даст вам ДОСТУПНУЮ ширину / высоту:

window.screen.availHeight
window.screen.availWidth

Для абсолютной ширины / высоты используйте:

window.screen.height
window.screen.width

Оба вышеперечисленных могут быть написаны без префикса окна.

Нравится jQuery? Это работает во всех браузерах, но каждый браузер дает разные значения.

$(window).width()
$(window).height()
Бен
источник
20

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

Для этого используйте: window.innerWidth и window.innerHeightсвойства. Смотрите это в w3schools .

В большинстве случаев это будет лучший способ, например, отображать идеально центрированный плавающий модальный диалог. Это позволяет вам рассчитывать позиции в окне, независимо от того, какую ориентацию разрешения или размер окна использует браузер.

serfer2
источник
1
Это самое полезное решение. Свойство window.screen.availWidth дает ЭКРАН, а не область просмотра, которая может отличаться. Для меня более полезно знать, сколько недвижимости я могу реально использовать, а не то, какой может быть максимальная цена браузера.
Майк Маннаки
19

Вы имеете в виду разрешение экрана (например, 72 точки на дюйм) или размеры в пикселях (в настоящее время окно браузера составляет 1000 x 800 пикселей)?

Разрешение экрана позволяет узнать, насколько толстой будет линия в 10 пикселей в дюймах. Размеры в пикселях показывают, какой процент доступной высоты экрана будет занимать горизонтальная линия шириной 10 пикселей.

Нет никакого способа узнать разрешение экрана только из Javascript, поскольку сам компьютер обычно не знает фактические размеры экрана, только количество пикселей. 72 точек на дюйм это обычное предположение ....

Обратите внимание, что существует большая путаница с разрешением экрана, часто люди используют термин вместо разрешения в пикселях, но они совершенно разные. Смотрите Википедию

Конечно, вы также можете измерить разрешение в точках на см. Есть также непонятный предмет неквадратных точек. Но я отвлекся.

Ларри К
источник
19

Используя jQuery вы можете сделать:

$(window).width()
$(window).height()
chaim.dev
источник
Это самое простое решение для кросса / всего, что я использовал. По крайней мере для ширины браузера ...
Zarne Dravitzki
34
Это возвращает размер окна, а не разрешение экрана.
Джонас
13

Попытка получить это на мобильном устройстве требует еще нескольких шагов. screen.availWidthостается неизменным независимо от ориентации устройства.

Вот мое решение для мобильных устройств:

function getOrientation(){
    return Math.abs(window.orientation) - 90 == 0 ? "landscape" : "portrait";
};
function getMobileWidth(){
    return getOrientation() == "landscape" ? screen.availHeight : screen.availWidth;
};
function getMobileHeight(){
    return getOrientation() == "landscape" ? screen.availWidth : screen.availHeight;
};
Posit Labs
источник
window.orientationвозвращает неопределенное ... (Firefox 49) screen.orientation.angleвозвращает угол, но для ландшафтного режима он уже равен 0.
Ламбарт
4
function getScreenWidth()
{
   var de = document.body.parentNode;
   var db = document.body;
   if(window.opera)return db.clientWidth;
   if (document.compatMode=='CSS1Compat') return de.clientWidth;
   else return db.clientWidth;
}
Анабаро
источник
4

только для дальнейшего использования:

function getscreenresolution()
{
    window.alert("Your screen resolution is: " + screen.height + 'x' + screen.width);
}
Даниил
источник
3

Если вы хотите определить разрешение экрана, вы можете проверить плагин Res . Это позволяет вам делать следующее:

var res = require('res')
res.dppx() // 1
res.dpi() // 96
res.dpcm() // 37.79527559055118

Вот несколько замечательных решений от Райана Ван Эттена, автора плагина:

  • Существуют 2 набора единиц измерения, которые отличаются в фиксированном масштабе: единицы измерения устройства и единицы измерения CSS.
  • Разрешение рассчитывается как количество точек, которые могут соответствовать определенной длине CSS.
  • Единица измерения: 1 дюйм = 2,54 см = 96 мкс = 72 мс
  • CSS имеет относительную и абсолютную длину. При обычном увеличении: 1⁢em = 16⁢px
  • dppx эквивалентен отношению устройств к пикселям.
  • Определение devicePixelRatio зависит от платформы.
  • Медиа-запросы могут быть нацелены на минимальное разрешение. Используйте с осторожностью для скорости.

Вот исходный код для res на сегодняшний день:

!function(root, name, make) {
  if (typeof module != 'undefined' && module.exports) module.exports = make()
  else root[name] = make()
}(this, 'res', function() {

  var one = {dpi: 96, dpcm: 96 / 2.54}

  function ie() {
    return Math.sqrt(screen.deviceXDPI * screen.deviceYDPI) / one.dpi
  }

  function dppx() {
    // devicePixelRatio: Webkit (Chrome/Android/Safari), Opera (Presto 2.8+), FF 18+
    return typeof window == 'undefined' ? 0 : +window.devicePixelRatio || ie() || 0
  }

  function dpcm() {
    return dppx() * one.dpcm
  }

  function dpi() {
    return dppx() * one.dpi
  }

  return {'dppx': dppx, 'dpi': dpi, 'dpcm': dpcm}
});
Аврам
источник