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

Есть ли способ, который работает для всех браузеров?

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

Да.

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

var width = screen.width;
var height = screen.height;

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

window.screen.availHeight
window.screen.availWidth

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

window.screen.height
window.screen.width

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

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

$(window).width()
$(window).height()

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

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

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

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

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

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

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

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

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

$(window).width()
$(window).height()

Попытка получить это на мобильном устройстве требует еще нескольких шагов. 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;
};

См. Получение разрешения экрана монитора с помощью Javascript и window.screenобъекта.

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;
}

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

function getscreenresolution()
{
    window.alert("Your screen resolution is: " + screen.height + 'x' + screen.width);
}

Если вы хотите определить разрешение экрана, вы можете проверить плагин 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}
});