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

Question

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

Answer 1

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

Да.

window.screen.availHeight
window.screen.availWidth

обновление 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

Answer 2

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

Answer 3

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

window.screen.availHeight
window.screen.availWidth

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

window.screen.height
window.screen.width

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

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

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

Answer 4

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

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

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

Answer 5

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

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

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

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

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

Answer 6

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

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

Answer 7

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

Answer 8

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

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

Answer 10

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

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

Answer 11

Если вы имеете в виду разрешение браузера, то

window.innerWidth дает разрешение браузера

вы можете протестировать с помощью http://howbigismybrowser.com/, попробуйте изменить разрешение экрана, увеличив / уменьшив масштаб браузера, и проверьте размер разрешения с помощью http://howbigismybrowser.com/ Window.innerWidth должен быть таким же, как ширина разрешения экрана

Answer 12

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

Answer 13

Простые шаги, чтобы найти разрешение экрана:

• Копировать

      `My screen resolution is: ${window.screen.width} * ${window.screen.height}`

• вставить в консоль браузера
• нажмите Enter