How to Target CSS for iPad But Exclude Safari 4 Desktop Using a Media Query

How to target CSS for iPad but exclude Safari 4 desktop using a media query?

 media="only screen and (device-width: 768px)"

Thanks to Mislav Marohnić for the answer!

This works for iPad in either orientation and seems to exclude desktop Safari.

When I was testing (min-device-width: 768px) and (max-device-width: 1024px)
I could see Safari 4 using the styles or ignoring them as I widened or narrowed the window.
When testing (device-width: 768px) I tried to make the desktop Safari browser exactly 786px wide, but I never got it to see the styles.

CSS media query to target only iOS devices

Yes, you can.

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */ 
}

@supports not (-webkit-touch-callout: none) {
  /* CSS for other than iOS devices */ 
}

YMMV.

It works because only Safari Mobile implements -webkit-touch-callout: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout

Please note that @supports does not work in IE. IE will skip both of the above @support blocks above. To find out more see https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/. It is recommended to not use @supports not because of this.

What about Chrome or Firefox on iOS? The reality is these are just skins over the WebKit rendering engine. Hence the above works everywhere on iOS as long as iOS policy does not change. See 2.5.6 in App Store Review Guidelines.

Warning: iOS may remove support for this in any new iOS release in the coming years. You SHOULD try a bit harder to not need the above CSS. An earlier version of this answer used -webkit-overflow-scrolling but a new iOS version removed it. As a commenter pointed out, there are other options to choose from: Go to Supported CSS Properties and search for "Safari on iOS".

iOS specific media queries

Media queries can only infer a few media features, and are designed to serve different content based on features, not brand or model.

Probably best you could do is to target the exact device-width for each device listed: someone here has already provided, as an indication, how to specifically match the iPad's dimensions.

The problem is that out of the huge range of devices out there, some feature the same dimensions (and the webkit browser — which can be inferred via hacks). All in all, CSS is even worse than JS at determining esoteric brand or OS features of the device in question.

Can I use OS X Safari browser to properly test iOS Safari browser-specific code using media queries?

For those who don't own an iOS device like an iPhone, iPad, or iPod Touch, the cheapest/free way to develop without the hardware is to download XCode and run the iOS Simulator. You can quickly switch between the devices in the simulator and they load as they would on the devices themselves.

Rock on and thank you to @icktoofay!

---

Related Topics