Отримайте ширину пристрою в 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.

Ви можете отримати ширину екрана пристрою через властивість screen.width.
Іноді також корисно використовувати window.innerWidth (зазвичай не зустрічається на мобільних пристроях) замість ширини екрана при роботі з браузерами настільних пристроїв, де розмір вікна часто менше, ніж розмір екрана пристрою.

Зазвичай під час роботи з мобільними пристроями та наглядачами для настільних комп'ютерів я використовую наступне:

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

Одне питання корисної відповіді Брайана Рігера полягає в тому, що на дисплеях з високою щільністю пристрої Apple повідомляють про ширину екрана в крапках, а пристрої 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 тощо : Щоб повернути більш абстрактне значення, наприклад, ім'я точки перелому, замість значення px, ви можете зробити щось на кшталт:

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 може діяти на них незалежно.

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

Це має справлятися з більшістю сценаріїв.

Ви повинні використовувати

document.documentElement.clientWidth

Це розглядається як сумісність між браузерами і є тим самим методом, що й jQuery (window) .width (); використовує.

Детальну інформацію можна переглянути: https://ryanve.com/lab/dimensions/

Я думаю, що використання window.devicePixelRatioє більш елегантним, ніж window.matchMediaрішення:

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

Перевір це

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

ви можете легко використовувати

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

Як і FYI, існує бібліотека під назвою точки прориву, яка визначає максимальну ширину, встановлену в CSS, і дозволяє використовувати її в JS, якщо в інших умовах використовуючи знаки <=, <,>,> = і ==. Я вважав це досить корисним. Розмір корисної навантаження становить менше 3 Кб.