Получить ширину устройства в JavaScript - PullRequest
Новая
       7

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

108 голосов
/ 27 июля 2011

Есть ли способ получить ширину пользовательского устройства, в отличие от ширины области просмотра, с помощью 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.

Ответы [ 8 ]

186 голосов
/ 27 июля 2011

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

 var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
51 голосов
/ 07 декабря 2012

Одна из проблем с полезным ответом Брайана Ригера состоит в том, что на дисплеях высокой плотности устройства 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.

12 голосов
/ 18 февраля 2013

У меня только что была эта идея, поэтому, возможно, она близорука, но, похоже, она работает хорошо и может быть наиболее согласованной между вашим 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), вы просто проверите значение максимальной ширины тега html: 

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

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

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

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

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

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

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

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

4 голосов
/ 19 февраля 2018

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

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

4 голосов
/ 07 мая 2017

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

if (window.innerWidth*window.devicePixelRatio <= 960 
    && window.innerHeight*window.devicePixelRatio <= 640) { 
    ... 
}
2 голосов
/ 29 января 2018

проверить 

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

2 голосов
/ 13 июля 2015

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

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

for (var i = 100; !window.matchMedia('(max-device-width: ' + i + 'px)').matches; i++) {}
var deviceWidth = i;
1 голос
/ 23 мая 2018

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

document.documentElement.clientWidth

...