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

Ответ 1

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

Да.

window.screen.availHeight
window.screen.availWidth

update 2017-11-10

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

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

И от Ben в другом ответе:

В ванильном JavaScript это даст вам доступную ширину/высоту:

window.screen.availHeight
window.screen.availWidth

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

window.screen.height
window.screen.width

Ответ 2

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

Ответ 3

В ванильном JavaScript это даст вам ДОСТУПНО width/height:

window.screen.availHeight
window.screen.availWidth

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

window.screen.height
window.screen.width

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

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

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

Ответ 4

С помощью jQuery вы можете:

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

Ответ 5

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

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

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

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

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

Ответ 6

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

Ответ 7

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

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

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

Ответ 8

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

Ответ 9

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

Ответ 10

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

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

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

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

Ответ 11

для справок в будущем:

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