Lets users remove hover styles on touch devices with one variable and modernizr

[impishj]

Let less users prefix hover states with .no-touch by adding it to @hover-prefix in variables.less which by default is just an empty string

This fixes unwanted hover states on touch devices (http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/)

I did compile the less using grunt and it produces no changes unless you add .no-touch to @hover-prefix in variables, that isn't the default so there are no changes reflected in the compiled/minified css.

Tested on ios 6 in Chrome & Safari.

Perhaps it should be an option in http://getbootstrap.com/customize/ ?

[cvrebert]

IMO, since we're mobile-first, we should take this into account in a even more built-in way.

[zlatanvasovic]

If I'm right, Bootstrap doesn't support vendor libraries (except jQuery), so Bootstrap should have this fixed by own way.

[impishj]

I think your right ZDroid, normally I would advocate not duplicating modernizer's effort but...

I looked into this further and it looks like support for touch can't be established reliably until an actual touch event is fired however that is not how modernizer works for detection.

We should include javascript as part of bootstrap that adds a touch class on the first touch interaction sense just in time is the only reliable way for it to work.

Not sure where that would fit with bootstrap's other modules, seems to be an odd man out situation.

[mdo]

Sounds nice, but adding depending on Modernizer seems against our current approach. We'll likely need a different approach for this, but I've aded it to #9397 to at least track it.

[carasmo]

I've been using this small script:

/* __________________ Supports Touch or Not __________________*/
/*  Detects touch support and adds appropriate classes to html and returns a JS object
*   Copyright (c) 2013 Izilla Partners Pty Ltd
*   http://www.izilla.com.au / Licensed under the MIT license
*   https://coderwall.com/p/egbgdw
*/
var supports=(function(){var a=document.documentElement,b="ontouchstart" in window||navigator.msMaxTouchPoints;if(b){a.className+=" touch";return{touch:true}}else{a.className+=" no-touch";return{touch:false}}})();

Implementation examples:

/* __________________ Turn off Pointer events on tel links on non-touch devices __________________*/
if( $("html").hasClass("no-touch") ) { 

    $(document).ready(function () {
        $('a[href^=tel]').css('pointer-events', 'none');
    });

} // end turn off pointer events

To automatically wrap tables and add a little message to touch users, since the scroll bar doesn't show unless they touch it, I use this:

/* __________________ Responsive Table wraps tables with div.table-responsive __________________*/

$(document).ready(function () {
    $('table').wrap('<div class="table-responsive" />');
    if ($("html").hasClass("touch")) { //load the touch script
        $('div.table-responsive').before('<span><i class="icon-alert"></i>Swipe to view all content</strong></span>');
    }
    $('table.not-responsive').unwrap();
});

It has been very smooth and reliable for IOS, Android, and Windows 8

[cvrebert]

Shameless plug: https://github.com/cvrebert/mq4-hover-hover-shim