1

Usually, when detecting mobile or tablet devices against a desktop, I use the following media queries.

@media only screen and (min-width: 991px)

I have a table component that renders the action buttons in each row on hover using the visibility setting in CSS. However, when the device is lower than min-width 991px, the icons are visible all the time as a mobile device don't use hover.

Now the issue is that iPads in landscape and iPad pros are more significant than the width 991. Is there a more advanced media query or Javascript code I can use to detect if its a mobile/iPad device vs a desktop browser.

I am using React and have created custom hooks for inline media queries for applying dynamic styles but that has the same issue.

Thank you Jonas for adding some advice about media queries with screen sizes however this does not cover my question. I am using media queries to turn off hover mode and some large tablets fall under laptop screen sizes. There is a great answer provided below.

AlexanderKaran
  • 515
  • 6
  • 18

1 Answers1

1

I wouldn't try to go as far as detecting devices. The better idea is to look for support. In this case you want to know if the device supports a pointer device and is capable of hover. If not capable of hover then at least it should support touch. With touch you can still access the focus states.

HTML

<div class="row">
    <div class="td">
        <a class="btn btn-primary" title="buy">
            <i class="fa fa-shopping-cart" aria-hidden="true"></i>
            <span>Add to shopping cart</span>
        </a>
    </div>
</div>

CSS

.row .btn span { display: none; } // mobile first don't display the button text
.row .btn .fa { display: inline-block; } // mobile first display icon

@media (any-hover: hover) {
    .row .btn span { display: inline-block; }
    .row .btn .fa { display: none; }
    .row .btn:hover .fa,
    .row .btn:active .fa,
    .row .btn:focus .fa { display: inline-block; }
}

Haven't tested this code, but this is how I would start working on a solution.

Tim Vermaelen
  • 6,869
  • 1
  • 25
  • 39