Problems using matchMedia / media queries to accomplish what you are doing:
Media queries for many touch devices are the same as on the desktop.
Guidance does not exist when touched. IOS takes a hang, and one click causes a 2 click dropdown to go to the link; BUUUT android does not work this way. Therefore, on touch devices, these reset menus are not available. How to do it right:
Detection of touch and contactless phones on Android, IOS and Windows 8 phones.
Delete attribute data attribute on .dropdown link - deleting this allows a click to work on this switch.
Wrap the delete attribute in an if statement if no-touch
Wrap script hang in no-touch if statement
Have a reserve for touch devices so they can get to the first menu item
Edit: http://jsbin.com/ejAXoda/1/edit
CSS
.touch .mobile-link {display:block;} .no-touch .mobile-link {display:none}
Script (s)
/* ----- Detect touch or no-touch */ /* 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 } } })(); // -------- DO the stuff only on no-touch devices only if ($("html").hasClass("no-touch")) { // ------- REMOVE THE DATA TOGGLE ONLY ON "no-touch" devices and get the link to work $('.dropdown > a').removeAttr("data-toggle"); // Hover dropdown for Bootstrap 3.x wrapped in this no-touch var /* * Project: Bootstrap Hover Dropdown * Author: Cameron Spear * Contributors: Mattia Larentis * * Dependencies: Bootstrap Dropdown plugin, jQuery * * A simple plugin to enable Bootstrap dropdowns to active on hover and provide a nice user experience. * * License: MIT * * http://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/ */ (function (e, t, n) { if ("ontouchstart" in document) return; var r = e(); e.fn.dropdownHover = function (n) { r = r.add(this.parent()); return this.each(function () { var i = e(this), s = i.parent(), o = { delay: 500, instantlyCloseOthers: !0 }, u = { delay: e(this).data("delay"), instantlyCloseOthers: e(this).data("close-others") }, a = e.extend(!0, {}, o, n, u), f; s.hover(function (n) { if (!s.hasClass("open") && !i.is(n.target)) return !0; a.instantlyCloseOthers === !0 && r.removeClass("open"); t.clearTimeout(f); s.addClass("open"); s.trigger(e.Event("show.bs.dropdown")) }, function () { f = t.setTimeout(function () { s.removeClass("open"); s.trigger("hide.bs.dropdown") }, a.delay) }); i.hover(function () { a.instantlyCloseOthers === !0 && r.removeClass("open"); t.clearTimeout(f); s.addClass("open"); s.trigger(e.Event("show.bs.dropdown")) }); s.find(".dropdown-submenu").each(function () { var n = e(this), r; n.hover(function () { t.clearTimeout(r); n.children(".dropdown-menu").show(); n.siblings().children(".dropdown-menu").hide() }, function () { var e = n.children(".dropdown-menu"); r = t.setTimeout(function () { e.hide() }, a.delay) }) }) }) }; e(document).ready(function () { e('[data-hover="dropdown"]').dropdownHover() }) })(jQuery, this); } //END IF no-touch for hover script & removeAttr for the links to work
HTML SAMPLE with a digression for the link:
<div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="http://getbootstrap.com" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">Blog <b class="caret"></b></a> <ul class="dropdown-menu"> <li class="mobile-link"><a href="blog.html">Latest News</a></li> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="./">Default</a></li> <li><a href="../navbar-static-top/">Static top</a></li> <li><a href="../navbar-fixed-top/">Fixed top</a></li> </ul> </div> </div>
I tested this on Android. Check it on iOS, Windows 8 and other devices before receiving / accepting. Should work smoothly.