Масштабирование браузера выводится как мобильное в адаптивном дизайне

#javascript #reactjs

Вопрос:

У меня есть веб-страница, которая отображает выпадающий список. По замыслу я хочу отключить выпадающий список в мобильном приложении. Я использовал размер порта просмотра в качестве критерия для определения того, является ли текущее устройство мобильным или нет. Всякий раз, когда я увеличиваю масштаб до 200 процентов или выше, размер области просмотра уменьшается, и он выводится как мобильное устройство. Следовательно, выпадающий список не отображается. Я не хочу использовать navigator.UserAgent для этой цели. Любой другой обходной путь для этого?

1. Можете ли вы поделиться своим CSS для выполнения медиа-запросов?

2. На данный момент у меня нет медиа-запросов. Я использовал js, чтобы просто сразу не отображать выпадающий список, когда он мобильный.

Ответ №1:

Всякий раз, когда я увеличиваю масштаб до 200 процентов или выше, размер области просмотра уменьшается, и он выводится как мобильное устройство.

То, что вы описываете, — это разница между пикселями устройства и пикселями CSS при увеличении. По мере увеличения масштаба браузера увеличивается и соотношение CSS к пикселям устройства. Именно так устроено большинство браузеров, и именно этого обычно ожидают посетители.

Итак, если ширина вашей страницы составляет 1000 пикселей:

при увеличении на 125% ваши пиксели CSS будут составлять 800 пикселей (1,000 / 1,25)
при увеличении на 150% ваши пиксели CSS будут 667 пикселей (1,000 / 1,5)
при 200% масштабировании ваши пиксели CSS будут составлять 500 пикселей (1,000 / 2)

Если вы хотите увеличить страницу, НЕ затрагивая пиксели CSS, вы можете сделать что-то пользовательское, используя свойство CSS transform .

 body {
   transform: scale(2);
   transform-origin: 0 0;
}

Проблема, которую я предвижу при таком подходе, заключается в том, что для этого обязательно потребуется боковая прокрутка.

WCAG 2.1 SC 1.4.10 требует, чтобы:

Контент может быть представлен без потери информации или функциональности и без необходимости прокрутки в двух измерениях для вертикальной прокрутки содержимого шириной, эквивалентной 320 пикселям CSS https://www.w3.org/WAI/WCAG21/Understanding/reflow.html

Ответ №2:

Вы можете использовать медиа-запрос max-device-width , который получает фактический размер экрана рендеринга устройства, а не размер области просмотра.

Например:

 .nav-menu {
    @media only screen and (max-device-width: 768px) {
        display: none;
    }
}