Geek Answers Handbook

Webkit equivalent: -moz-system-metric (with touchscreen)

: -moz-system-metric (touch-enabled) looks like a really useful CSS selector for working on mobile sites.

Unfortunately, Webkit dominates on mobile touch devices, so does anyone know if there is an equivalent to Webkit?

(Ideally, it would be nice if it were driven by CSS3 media queries)

Edit: It looks like it is supported in Gecko as a media query

+7
css css3 media-queries touch webkit
source share
3 answers

It is not possible to accomplish this without resorting to Javascript at this time.

As @easwee said, Modernizr is a well-regarded JS library that focuses on feature detection. You can use its touch test for your use case.

If you do not need all the bells and whistles of Modernizr, you can do the following:

A) Download the following JS early on in your <body> , as you can:

 <script type="text/javascript"> if( !!window.TouchEvent ) body.className += " touch-enabled "; </script>

B) Write your CSS. Since Gecko uses a media query to tell you about the availability of a touch, you have to trick touch CSS, for example:

 BODY.touch-enabled DIV.foo { /* touch-specific CSS */ } @media screen and (-moz-touch-enabled) { DIV.foo { /* touch-specific CSS */ } }

If the code for each selector is identical in both circumstances, GZIP should optimize part of the duplication. (I hope you use compression.)

+5
source share

In Ian Wessman, the answer to the test !!window.TouchEvent does not work correctly. In the current Chrome desktop browser (23.0.1271.52, Linux), window.TouchEvent is a function, which is why the Ian code considers a touch-screen browser.

If you need a short code, it is best to copy-paste the appropriate code from Modernizr .

+2
source share

Chrome is another browser that tried to implement a similar selector, but unfortunately it has been removed at the moment.

Modernizr can be an interesting detection tool, as it can also detect touch events.

http://www.modernizr.com/docs/#touch

+1
source share

More articles:


All Articles