July 9, 2012

Touchscreen media-queries

Question by JJ56

What is the safest way, using media queries, to make something happen when not on a touchscreen device? If there is no way, do you suggest using a javascript solution such as !window.Touch or modernizer?

Thanks in advance!

Answer by Starx

I would suggest using modernizr and using its media query features.

if (Modernizr.touch){
   // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
   // bind to normal click, mousemove, etc
}

However, using CSS, there are psedo class like, for example in firefox. You can use :-moz-system-metric(touch-enabled). But these features are not available for every browswers.

For Apple devices, you can simple use:

if(window.TouchEvent) {
   //.....
}

Specially for Ipad

if(window.Touch) {
    //....
}

But, these do not work on Android.

Modernizr gives feature detection abilities, and detecting features is
a good way to code, rather than coding on basis of browsers.

April 10, 2012

What is the syntax for a CSS media query that applies to more than one property (AND operator)?

Question by mattwindwer

I would like to write a CSS media query that matches all devices with at least a 800px width and 800px height. The purpose of this media query is to target tablets and exclude phones. I do not need to worry about desktops in this case, since I am only targeting mobile devices.

I started with:

@media all and (min-device-width: 800px), all and (min-device-height: 800px)

…but I don’t believe that will work because it will be true if either of the two conditions are met (logical OR).

So my next guess would be:

@media all and (min-device-width: 800px, min-device-height: 800px)

What is the syntax for an AND and not an OR?

Answer by Starx

Remove the commas from your declaration

@media all and (min-device-width: 800px) and (min-device-height: 800px) {
  //...........
}

Read this doc for more info

...

Please fill the form - I will response as fast as I can!