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

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()

С помощью jQuery вы можете сделать:

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

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

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

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

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

конечно, вы также можете измерить разрешение в точках на сантиметр. Существует также неясная тема неквадратных точек. Но я отвлекся.

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

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

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

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

посмотреть получить разрешение экрана монитора с 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;
}

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

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

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

• 2 набора единиц существуют и отличаются в фиксированном масштабе: единицы устройств и единицы CSS.
• разрешение рассчитывается как количество точек, которые могут поместиться вдоль определенного CSS длина.
• преобразование единиц измерения: 1 in in = 2.54 cm cm = 96 P px = 72 pt pt
• CSS имеет относительную и абсолютную длину. При обычном увеличении: 1 em 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}
});

просто на будущее:

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