1

I am working on a side project and using Bourbon Neat as my grid. I have a few media queries targeting specific mobile devices such as iPhone 5, iPhone 6, and iPhone 6 Plus. My question is am I able to target a specific device, without carrying the styles over to another device? For example, I have a media queries set up for iPhone 6 and iPhone 6+. Here is what my media queries look like...

/* iPhone 6+ in portrait & landscape */
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) {
  /* STYLES GO HERE */
}
/* iPhone 6+ in landscape */
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) {
  /* STYLES GO HERE */
}
/* iPhone 6+ in portrait */
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) {
  /* STYLES GO HERE */
}
/* iPhone 6 in portrait & landscape */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) {
  /* STYLES GO HERE */
}
/* iPhone 6 in landscape */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) {
  /* STYLES GO HERE */
}
/* iPhone 6 in portrait */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) {
  /* STYLES GO HERE */
}

What I am ruining into is some changes I make in the iPhone 6 landscape media query seem to get applied to iPhone 6 Plus landscape, the iPhone 6 media query changes will override my iPhone 6 Plus changes. Again, am I able to only target a specific device without those changes being applied to other devices with similar pixel width? Any and all help or feedback is much appreciated. Thank you.

Jon Lambson
  • 510
  • 2
  • 11

2 Answers2

2

Again, am I able to only target a specific device without those changes being applied to other devices with similar pixel width?

To answer your specific question, you cannot target by device via CSS other than by using widths, heights, etc.. but that's not really targeting the browser. So the answer is no. This requires knowing more than just what the width, height, or orientation of the browser is. And even if you could, I'm not sure you'd want to as it's not a very clean solution IMO.

If you absolutely must target by device you'll need to use server or browser side code. Here are some non-CSS solutions if you'd like to look into them:

1) You can use javascript: http://hgoebl.github.io/mobile-detect.js/

2) Or you can use a server side library like: http://mobiledetect.net/

But a better solution would be to structure the CSS to make sure that the styles are not overriding each other.

Michael Heath
  • 174
  • 2
  • 11
1

You can find out the device resolutions you are trying trying to target and be more specific in your media queries. For example, to target an ipad in portrait mode:

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait)" {
  /* styles */
}

Or for an ipad in landscape mode:

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
  /* styles */
}

However, with this technique there is no guarantee you won't end up apply the styles to another device with the same resolution. The safest way to target a device is using javascript and some OS/device sniffing.

CaribouCode
  • 13,998
  • 28
  • 102
  • 174