Неверное разрешение экрана в браузерах на мобильных телефонах [дубликат]

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

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

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

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

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

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

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

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

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

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

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

В ванильном JavaScript это даст вам AVAILABLE width / height:

window.screen.availHeight
window.screen.availWidth

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

window.screen.height
window.screen.width

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

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

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

С помощью 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;
};

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

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

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