How make media queries, one that includes the iPad pro and one that excludes it for desktop?

Question

The iPad Pro is in a width that crosses into desktop widths - 1366px. There are a lot of smaller laptops now that fit the same width as the iPad Pro (the 11 and 13 inch laptops).

On the iPad Pro, I want to show things like a hamburger menu, but on the desktops, I want navigation with mouseovers.

Before the iPad Pro, I could make the cutoff be 1024 px wide, but now there's cross-over.

I need both a media query that includes it (so it shows the mobile landscape view) and one that excludes it (so desktops show only when not ipad Pro).

I think this one includes it properly:

<!-- Put on multiple lines for readability -->
<link rel="stylesheet" media="only screen 
     and (min-device-width: 1024px) 
     and (max-device-width: 1366px) 
     and (orientation: landscape) 
     and (-webkit-min-device-pixel-ratio: 1.5)"                
     href="/css/desktop.css" />

But I can't figure out how to make a desktop media query that will exclude the iPad Pro and include all desktops from 1024px and larger. Is this possible? What would it be?

Why not make your navigation work with both mouseover and click/tap? — ceejayoz, May 01 '17 at 22:19
@ceejayoz I don't want the hamburger to even show on small desktops, and I *do* want it to show on iPad Pro. — Don Rhummy, May 01 '17 at 22:22

score 0 · Answer 1 · edited May 23 '17 at 12:34

That's a good attempt, but you can't be sure if you don't test it on those devices. I think most reliable way to do this is using script like the one on https://stackoverflow.com/a/4617648/1729641

You can for example add a class to body with JavaScript:

document.body.className += (navigator.userAgent.match(/iPad/i) != null) ? ' ipad' : '';

If you use JQuery:

if (navigator.userAgent.match(/iPad/i) != null) {
    $(body).addClass('ipad');
}

If your goal is to avoid downloading this style on another device, you can load it with AJAX. It's unpure, I know.

How make media queries, one that includes the iPad pro and one that excludes it for desktop?

1 Answers1