Specify touch screen specific stylesheet

[Neil1]

Is there anyway to detect user interface in CSS media queries? I have a few divs that feature small clickable icons to interact like the up/down arrows in this scollable div (http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm) and the left/right arrows in this photo gallery (http://www.dynamicdrive.com/dynamicindex17/parallaxslider/index.htm) On small screens (eg phones) the icons are too small to be functional without zooming, and it occurred to me redundant on any touchscreen device so would like to style them independently depending on interface... if touchscreen hide buttons completely and replace with a note eg "Swipe to scroll" if mouse pointer fancy icons with hover effect, (and possibly although not as important) if keyboard simple icons with no effects.

Hopefully this is the right thread! I figured CSS since it is a media query I'm trying to implement, but I haven't been able to find a query that relates to this so guessing it will need to be a combination of css and javascript?

[Beverleyh]

With CSS media queries you can detect things like width, height, pixel density, aspect ratio, and even luminosity, but unfortunately you cannot detect touch.


On small screens (eg phones) the icons are too small to be functional without zooming
You can increase the icon size at small screen widths. I'm not sure if you're using a mobile-first or desktop-down approach, which will affect how you write the media queries.

For mobile-first you would write something like this in your stylesheet;
.icon { width:2em; height:2em } /* default, mobile-first styles */

...

@media ( min-width:37.5em ) { /* desktop override styles - bigger than 600px */
.icon { width:0.5em; height:0.5em }
}


But for desktop-first, you'd write something like this instead;
.icon { width:0.5em; height:0.5em } /* default, desktop styles */

...

@media ( max-width:37.5em ) { /* mobile override styles - smaller than 600px */
.icon { width:2em; height:2em }
}