Получить ширину устройства в javascript

Вы можете получить ширину экрана устройства через свойство screen.width.
Иногда также полезно использовать window.innerWidth (обычно не встречается на мобильных устройствах) вместо ширины экрана при работе с настольными браузерами, где размер окна часто бывает меньше, чем размер экрана устройства.

Обычно при работе с мобильными устройствами И настольными браузерами я использую следующее:

 var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

Одна из проблем, связанных с полезным ответом Брайана Ригера, заключается в том, что на дисплеях с высокой плотностью изображения устройства Apple передают значение screen.width в виде провалов, а устройства Android - в физических пикселях. (См. http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html.) Я предлагаю использовать if (window.matchMedia('(max-device-width: 960px)').matches) {} в браузерах, поддерживающих matchMedia.

У меня только что возникла эта идея, так что, возможно, она близорука, но, похоже, она работает хорошо и может быть наиболее последовательной между вашим CSS и JS.

В вашем CSS вы устанавливаете значение максимальной ширины для html на основе значения экрана @media:

@media screen and (max-width: 480px) and (orientation: portrait){

    html { 
        max-width: 480px;
    }

    ... more styles for max-width 480px screens go here

}

Затем, используя JS (возможно, через фреймворк, такой как JQuery), вы должны просто проверить значение максимальной ширины тега html:

maxwidth = $('html').css('max-width');

Теперь вы можете использовать это значение для внесения условных изменений:

If (maxwidth == '480px') { do something }

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

Полезно, если вы используете Sass и т. д.: чтобы вернуть более абстрактное значение, такое как имя точки останова, вместо значения в пикселях вы можете сделать что-то вроде:

1. Создайте элемент, который будет хранить имя точки останова, например <div id="breakpoint-indicator" />
2. Использование медиа-запросов css изменяет свойство содержимого для этого элемента, например. грамм. "большой" или "мобильный" и т. д. (тот же базовый подход к медиа-запросам, что и выше, но с установкой свойства css 'content' вместо 'max-width').
3. Получите значение свойства содержимого css с помощью js или jquery (jquery, например, $('#breakpoint-indicator').css('content');), который возвращает "большой" или "мобильный" и т. Д. В зависимости от того, какое свойство содержимого установлено в медиа-запросе.
4. Действуйте по текущему значению.

Теперь вы можете использовать те же имена точек останова, что и в sass, например sass: @include respond-to(xs) и js if ($breakpoint = "xs) {}.

Что мне особенно нравится в этом, так это то, что я могу определять свои имена точек останова в css и в одном месте (вероятно, в документе scss переменных), и мои js могут действовать на них независимо.

Вы должны использовать

document.documentElement.clientWidth

Это считается совместимостью между браузерами и является тем же методом, что и jQuery (window) .width (); использует.

Для получения подробной информации посетите: https://ryanve.com/lab/dimensions/

Проверь это

const mq = window.matchMedia( "(min-width: 500px)" );

if (mq.matches) {
  // window width is at least 500px
} else {
  // window width is less than 500px
}

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

var width = Math.max(window.screen.width, window.innerWidth);

Это должно обрабатывать большинство сценариев.

Я думаю, что использование window.devicePixelRatio более элегантно, чем решение window.matchMedia:

if (window.innerWidth*window.devicePixelRatio <= 960 
    && window.innerHeight*window.devicePixelRatio <= 640) { 
    ... 
}

вы можете легко использовать

document.documentElement.clientWidth

Телефоны Lumia выдают неправильную ширину экрана (по крайней мере, на эмуляторе). Так может быть Math.min(window.innerWidth || Infinity, screen.width) будет работать на всех устройствах?

Или что-то более безумное:

for (var i = 100; !window.matchMedia('(max-device-width: ' + i + 'px)').matches; i++) {}
var deviceWidth = i;

Ya mybe u может использовать document.documentElement.clientWidth, чтобы получить ширину устройства клиента и отслеживать ширину устройства, установив setInterval

как

setInterval(function(){
        width = document.documentElement.clientWidth;
        console.log(width);
    }, 1000);

Основываясь на методе, который Bootstrap использует для установки своих Адаптивных точек останова, следующая функция возвращает xs, sm, md, lg или xl в зависимости от ширины экрана:

console.log(breakpoint());

function breakpoint() {
    let breakpoints = {
        '(min-width: 1200px)': 'xl',
        '(min-width: 992px) and (max-width: 1199.98px)': 'lg',
        '(min-width: 768px) and (max-width: 991.98px)': 'md',
        '(min-width: 576px) and (max-width: 767.98px)': 'sm',
        '(max-width: 575.98px)': 'xs',
    }

    for (let media in breakpoints) {
        if (window.matchMedia(media).matches) {
            return breakpoints[media];
        }
    }

    return null;
}

Как и FYI, существует библиотека под названием breakpoints, которая определяет максимальную ширину как устанавливается в CSS и позволяет использовать его в условиях if-else JS с использованием знаков ‹=,‹,>,> = и ==. Я нашел это весьма полезным. Размер полезной нагрузки менее 3 КБ.