Zurb Foundation visibility classes for ultrabooks and hybrid laptops

Question

I am trying to hide a div for tablets & smartphones, but still want to show it on hybrid devices such as Microsoft Surface Pro.

Foundation 4 provides touch detection classes, however I am not sure if it is going to hide or show on hybrid devices.

Has anyone had an experience with that? How would I control it?

/* The touch detection classes */
.show-for-touch       /* Visible for touch enabled devices */
.hide-for-touch       /* Hidden for touch enabled devices */

Answer 1

Foundation 4 uses Modernizr for detecting support for the Touch Events API in browsers, not touch devices. I think your best 'fix' for the problem is to sniff the user-agent to see if it matches the relevant one Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; Touch) , taken from User-agent string. To make it future proof, maybe just see if the user-agent string ends in Touch and contains Windows. If you detect such a user-agent then have Modernizr execute alternative code (you decide what).

I see the current Foundation 4 version uses a custom Modernizr build, namely Build: http://modernizr.com/download/#-inlinesvg-svg-svgclippaths-touch-shiv-mq-cssclasses-teststyles-prefixes-ie8compat-load.

In order to write a custom test for Modernizr, you'll need Modernizr.addTest, which is missing from the default build included with Foundation 4. You'll need to make your custom build, I've prepared it for you, it should also contain all other 'features' the current Foundation Modernizr custom build contains Custom Modernizr Build with addtest

Here's how a sample Modernizr test would look, for your custom user-agent testing.

Modernizr.addTest('winsurface', function () {
 return !!navigator.userAgent.match(/put your regex here/g);
});

Then, if you'd like to do something in case the test is positive, you would do:

if (Modernizr.winsurface) {
...put your js code here
}