2

Does anyone know of a way to target only iOS devices using media queries? I'm looking for a way to give an iPhone (1,3G,3GS,4,4S,5) user one experience, an iPad (1,2,3,mini) user another, and everybody else (desktop, android, windows phone, bb) the default experience.

I feel like my options are limited since many phones share similar widths and parameters. Does anyone know of anything to use in media queries that are specific to iPhones and specific to iPads?

I've so far locked down iPhone 5 with the following code:

@media screen and (device-aspect-ratio: 40/71){}

and iPhone 4 and 4S with:

@media
only screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:portrait),
only screen and (min-device-pixel-ratio : 2)  and (orientation:portrait){}

@media screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:landscape), screen and (min-device-pixel-ratio : 2) and (orientation:landscape){}

I've seen similar questions to this on here, but haven't found one that has addressed this specific use case.

This is for use in an email so I'm unable to use javascript. Media Queries only...

Thanks

user1180997
  • 105
  • 1
  • 3
  • 11

1 Answers1

0

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.

Community
  • 1
  • 1
Barney
  • 16,181
  • 5
  • 62
  • 76