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

Есть ли способ получить ширину пользовательского устройства, а не ширину видового экрана, используя javascript?

CSS-запросы СМИ предлагают это, как я могу сказать

@media screen and (max-width:640px) {
    /* ... */
}

@media screen and (max-device-width:960px) {
    /* ... */
}

Это полезно, если я ориентирую смартфоны в альбомной ориентации. Например, в iOS декларация max-width:640px будет нацелена как на ландшафтный, так и на портретный режимы даже на iPhone 4. Это не так для Android, насколько я могу судить, поэтому использование ширины устройства в этом случае успешно нацелено обе ориентации, без таргетинга на настольные устройства.

Однако, если я вызываю привязку javascript на основе ширины устройства, я, по-видимому, ограничен тестированием ширины видового экрана, что означает дополнительный тест, как в следующем,

if ($(window).width() <= 960 && $(window).height <= 640) { /* ... */ }

Это не кажется мне элегантным, учитывая подсказку, что ширина устройства доступна для css.

Ответы

Ответ 1

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

Как правило, при работе с мобильными устройствами и настольными браузерами я использую следующее:

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

Ответ 2

Одна из проблем с Bryan Rieger - полезный ответ: на дисплеях с высокой плотностью устройства 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.

Ответ 3

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

В вашем CSS вы устанавливаете значение max-width для 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), вы просто проверите значение max-width тега html:

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

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

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

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

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

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

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

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

проверить его

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

Ответ 7

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

Или что-то более сумасшедшее:

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

Ответ 8

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

document.documentElement.clientWidth

Ответ 9

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

так же, как

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