Есть ли способ получить ширину устройства пользователя, а не ширину области просмотра, с помощью javascript?
Медиа-запросы CSS предлагают это, как я могу сказать
@media screen and (max-width:640px) {
/* ... */
}
и
@media screen and (max-device-width:960px) {
/* ... */
}
Это полезно, если я ориентируюсь на смартфоны в альбомной ориентации. Например, в iOS объявление max-width:640px
будет нацелено как на альбомный, так и на портретный режимы, даже на iPhone 4. Насколько я могу судить, это не относится к Android, поэтому использование device-width в этом случае успешно нацелено на обе ориентации, без ориентации на настольные устройства.
Однако , если я вызываю привязку javascript на основе ширины устройства, мне кажется, что я ограничен тестированием ширины области просмотра, что означает дополнительный тест, как показано ниже.
if ($(window).width() <= 960 && $(window).height <= 640) { /* ... */ }
Мне это не кажется элегантным, учитывая намек на то, что ширина устройства доступна для css.
источник
Modernizr
может помочь вам сделать это «чистым и универсальным способом»: stackoverflow.com/questions/25935686/… . Что касается 1-го комментария: вы можете захотеть погуглить "Modernizr vs <otherLib> media query", чтобы узнать, что лучше всего подходит для вашего варианта использованияОтветы:
Вы можете получить ширину экрана устройства через свойство screen.width.
Иногда также полезно использовать window.innerWidth (обычно не встречается на мобильных устройствах) вместо ширины экрана при работе с настольными браузерами, где размер окна часто меньше размера экрана устройства.
Обычно при работе с мобильными устройствами И настольными браузерами я использую следующее:
источник
width=device-width
вы должны получить фактическое значение.var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
возвращает 667 на iphone 6 и 6 Plus. Это решение работает некорректно.Одна из проблем, связанных с полезным ответом Брайана Ригера, заключается в том, что на дисплеях с высокой плотностью изображения устройства Apple сообщают ширину экрана в виде провалов, а устройства Android - в физических пикселях. (См. Http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html .) Я предлагаю использовать
if (window.matchMedia('(max-device-width: 960px)').matches) {}
в браузерах, поддерживающих matchMedia.источник
if (window.matchMedia('(max-device-width: 960px)').matches) { var winW = (window.innerWidth > 0) ? window.innerWidth : screen.width; } else { var winW = screen.width; }
var isMobile = window.matchMedia && window.matchMedia('(max-device-width: 960px)').matches || screen.width <= 960;
matchMedia()
есть полифилл: github.com/paulirish/matchMedia.jsУ меня только что возникла эта идея, так что, возможно, она недальновидна, но, похоже, она хорошо работает и может быть наиболее последовательной между вашим CSS и JS.
В вашем CSS вы устанавливаете значение максимальной ширины для html на основе значения экрана @media:
Затем, используя JS (возможно, через фреймворк, такой как JQuery), вы должны просто проверить значение максимальной ширины тега html:
Теперь вы можете использовать это значение для условных изменений:
Если установка значения максимальной ширины в теге html кажется пугающей, тогда, возможно, вы можете поставить другой тег, который используется только для этой цели. Для моей цели тег html работает нормально и не влияет на мою разметку.
Полезно, если вы используете Sass и т. Д .: Чтобы вернуть более абстрактное значение, такое как имя точки останова, вместо значения px вы можете сделать что-то вроде:
<div id="breakpoint-indicator" />
$('#breakpoint-indicator').css('content');
), который возвращает «большой» или «мобильный» и т. Д. В зависимости от того, какое свойство содержимого установлено в медиа-запросе.Теперь вы можете использовать те же имена точек останова, что и в sass, например sass:
@include respond-to(xs)
и jsif ($breakpoint = "xs) {}
.Что мне особенно нравится в этом, так это то, что я могу определять имена своих точек останова в css и в одном месте (вероятно, в документе scss переменных), и мои js могут действовать на них независимо.
источник
var width = Math.max(window.screen.width, window.innerWidth);
Это должно обрабатывать большинство сценариев.
источник
Вы должны использовать
Это считается совместимостью между браузерами и является тем же методом, что и jQuery (window) .width (); использование.
Для получения подробной информации посетите: https://ryanve.com/lab/dimensions/
источник
Я думаю, что использование
window.devicePixelRatio
более элегантно, чемwindow.matchMedia
решение:источник
Проверь это
https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
источник
вы можете легко использовать
document.documentElement.clientWidth
источник
Телефоны Lumia выдают неправильную ширину экрана (по крайней мере, на эмуляторе). Так может
Math.min(window.innerWidth || Infinity, screen.width)
будет работать на всех устройствах?Или что-то более безумное:
источник
Ya mybe u может использовать document.documentElement.clientWidth, чтобы получить ширину устройства клиента и отслеживать ширину устройства, установив setInterval
как
источник
Как и в случае с FYI, существует библиотека, называемая точками останова, которая определяет максимальную ширину, установленную в CSS, и позволяет использовать ее в условиях if-else JS с использованием знаков <=, <,>,> = и ==. Я нашел это весьма полезным. Размер полезной нагрузки менее 3 КБ.
источник
На основе метода, который Bootstrap использует для установки своих точек останова Responsive , следующая функция возвращает xs, sm, md, lg или xl в зависимости от ширины экрана:
источник