How to use a Conditional with a Media Only CSS query for iPad Pro?

I have edit and delete icons which show on hover only on desktop to create a tidy interface.

Since a User cannot hover on an iPad and since iPad Pro is similar to desktop dimensions and since the ‘mobile’ version of a page only targets cell phones, how can I use CSS Media queries to target iPad Pro?

Eg. the Media Queries for iPad Pros are:

Landscape
@media only screen and (min-device-width: 1366px) and (max-device-height: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}

Portrait
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}

and my condition for desktop is a simple:
When Parent A is hovered, show Child A icons

iPad would be:
When (condition?), Child A icons are visible

What (condition?) can I put in that will cause the correct iPad Pro CSS Media Queries ID to be applied?

Or is there some other out of the box suggestion? The only thing I can think of is to not support iPad Pro at all and just use screen size below 768 to show icons all the time.

Idea: Be good to have Media queries as options in the Condition drop down

You can use conditional logic based on the width of the screen which should get you pretty far with this. For example, when user hovers this element and screen width > 1366 then display edit and delete icons.

Note - I don’t think there’s a way to focus on specific devices today without using a line or two of Javascript, which wouldn’t be that hard to implement. But, designed pages exclusively based on width of the viewport works quite well generally.

1 Like

I should have tried this first! I thought it was going to not work for a MacBook but all the ones here in the office are set at default 1440 so its above the 1366 Pro size.

This topic was automatically closed after 70 days. New replies are no longer allowed.