2

I know there isn't an explicit CSS media query method to detect touch devices, and I know it's possible to run a Modernizr script to check for touch capabilities.

However, I'm wondering if there is any reason not to use the media query (orientation:portrait) and (orientation:landscape) to help isolate touch devies. My assumption is that only touch devices have this type of capability.

Are there any desktop/laptop/keyboard devices that utilize orientation?

Marc P
  • 606
  • 1
  • 11
  • 26
  • Possible duplicate of [Media query to detect if device is touchscreen](http://stackoverflow.com/questions/11387805/media-query-to-detect-if-device-is-touchscreen) – chimos Feb 10 '17 at 14:03

2 Answers2

2

Yes there is reason not to: orientation is unrelated to whether the device uses touch, it uses viewport width and height to esablish what the orientation is. (orientation: landscape) will apply when the viewport is wider than it is tall and (orientation: portrait) will apply when the viewport is taller than it is wide. So in effect, any browser on any device that supports media queries fully will utilise orientation.

Check out the jsfiddle form this stackoverflow answer and you'll see the orientation media query taking effect when you resize your browser window.

As an addendum, you should be aware of this quote from the modernizr docs:

The Modernizr.touch test only indicates if the browser supports touch events, which does not necessarily reflect a touchscreen device. For example, Palm Pre / WebOS (touch) phones do not support touch events and thus fail this test. Additionally, Chrome (desktop) used to lie about its support on this, but that has since been rectified. Modernizr also tests for Multitouch Support via a media query, which is how Firefox 4 exposes that for Windows 7 tablets.

From http://modernizr.com/docs/#features-misc

Having said that, it may still be suitable for what you're doing. That's up to you

Community
  • 1
  • 1
Josh Davenport-Smith
  • 5,456
  • 2
  • 29
  • 40
  • Ah, I see! Thanks for providing this example. However, I'm using a negative condition, and I seem to be getting expected results in order to detect just mobile and tablet devices. Is this too good to be true: http://jsfiddle.net/foomarks/vP76n/ – Marc P May 12 '14 at 22:33
  • Unfortunately, yeah. The use of `not` is wrong: "The `not` keyword applies to the whole media query and returns true if the media query would otherwise return false. The not keyword cannot be used to negate an individual feature query, only an entire media query" ([source](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#not)). The second media query is interpreted as `only screen and (min-width: 361px), all, all`. So regardless of device you'll see a red background at 320px until 361px and above where you'll see a blue background – Josh Davenport-Smith May 12 '14 at 22:53
0

Yes, every device can change orientation by resizing the browser window. Don't use it for this, just use Javascript to add a class to the body tag.

antpaw
  • 15,444
  • 11
  • 59
  • 88