Media query for iPad pro - responsive design issue

Design help General
1

I am looking for some help with responsive design for iPad pro. The iPad pro resolution means that it sits in the smallest desktop breakpoint.

I have added the next breakpoint up for larger desktop sizes, so the devices in the small desktop breakpoint are:

Retina MacBook 12"
MacBook Pro (earlier 13" models)
iPad pro 12.9"
Galaxy Tab S3
Surface Pro 3 (Portrait)

The issue I have is that I have dropdowns in my navigation that I want to function as hover dropdowns on the MacBooks but this doesn’t work for ipad since it takes you to the top level landing page without showing the options in the dropdown, therefore adding an extra step in the user journey which I’d ideally like to avoid.

Is there a way to use custom media queries to include the touch devices within this small desktop breakpoint within the iPad breakpoint therefore using the iPad styling?

Or is there a way to add custom code of some sort to push the macbooks into the next breakpoint up so only the touch devices are in this breakpoint?

Apologies if this is a stupid question, but would hugely appreciate any help :slight_smile:

Thanks!

Website is currently in development…

Here is my site Read-Only: https://preview.webflow.com/preview/ocean-orthodontics?utm_medium=preview_link&utm_source=designer&utm_content=ocean-orthodontics&preview=79bda87c5fcdafa53abc5ca63b99eaa1&pageId=5f01c41514696c9609432e70&mode=preview

2

Hi @aliattrill!

I’m no expert here, but if I’m understanding you correctly – you may be able to use media queries to target non-touch devices within the small desktop breakpoint. I’ve found this overview helpful: Detect a touch device with only CSS | by Riccardo Andreatta | Medium

It’s worth noting that the updated iPadOS with pointer/cursor support may not honor those media queries as expected, but I’d assume that will be sorted out in the near future. More on that here.

3

Brilliant, thank you @blakelam

Will look into this now.

1 Like