CSS Media Queries недостаточно, чтобы обнаружить очень большие мобильные / планшетные устройства по сравнению с рабочим столом
На этот вопрос уже есть ответ здесь:
Обычно при обнаружении мобильных или планшетных устройств на рабочем столе я использую следующие медиазапросы.
@media only screen and (min-width: 991px)
У меня есть компонент таблицы, который отображает кнопки действий в каждой строке при наведении курсора, используя настройки видимости в CSS. Однако, когда устройство меньше минимальной ширины 991px, значки видны все время, так как мобильное устройство не использует наведение.
Теперь проблема в том, что iPad в альбомной ориентации и iPad-профессионалы более значительны, чем ширина 991. Существует ли более продвинутый медиа-запрос или код Javascript, который я могу использовать, чтобы определить, является ли это мобильное устройство / iPad по сравнению с настольным браузером.
Я использую React и создал собственные хуки для встроенных медиа-запросов для применения динамических стилей, но это имеет ту же проблему.
Спасибо, Джонас, за добавление некоторых советов по поводу медиа-запросов с размерами экрана, однако это не охватывает мой вопрос. Я использую медиазапросы, чтобы отключить режим зависания, и некоторые большие планшеты попадают под размеры экрана ноутбука. Ниже приведен отличный ответ.