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

Question

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

Answer 1

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

Да.

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

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

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

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

Answer 5

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

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

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

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

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

Answer 6

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

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

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

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