Як виявити роздільну здатність екрана за допомогою 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, уникаючи панелей інструментів браузера та ... (не лише розмір екрана).

Для цього використовуйте: window.innerWidth і window.innerHeightвластивості. Перегляньте це в w3schools .

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

Ви маєте на увазі роздільну здатність дисплея (наприклад, 72 точки на дюйм) або розміри пікселів (зараз вікно браузера становить 1000 х 800 пікселів)?

Дозвіл екрану дозволяє вам знати, наскільки товста буде 10-піксельна лінія в дюймах. Розміри пікселів показують, який відсоток доступної висоти екрана буде зайнято горизонтальною лінією на 10 пікселів.

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

Зауважте, що в роздільній здатності дисплея дуже багато плутанини, люди часто використовують термін замість роздільної здатності пікселів, але обидва є досить різними. Побачити Вікіпедію

Звичайно, ви також можете виміряти роздільну здатність у крапках на сантиметр. Існує також незрозумілий предмет не квадратних крапок. Але я відволікаюсь.

За допомогою 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);
}

Якщо ви хочете , щоб виявити здатність екрану, ви можете оформити плагін рез . Це дозволяє зробити наступне:

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 відрізняється платформою.
• Медіа-запити можуть націлювати мінімальну роздільну здатність. З обережністю використовуйте швидкість.

Ось вихідний код для відпочинку на сьогодні:

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