How to determine which device you are using when using the Twitter Bootstrap API?

Question

I just started playing with the Twitter Bootstrap API for the project I came up with. The main navigator contains 3 main elements:

• nav site
• social links nav
• site form search

I use the collapse plugin to collapse the site navigation and search form when viewing the site on mobile devices. In the mobile view, there are two buttons that, when pressed, switch to the search form or enter / turn off the main navigation.

However, if I turn off the search form and resize my browser to the desktop, is the search form still hidden in this view?

I read about using classes like visible-mobile, etc., but they seem to come across collapse plugin. I also understand that maybe I could write my own CSS hacks to fix this, but thought I would ask if there is an easier solution.

Bootstrap has show events shown, hidden and hidden, so I thought that maybe I could write some kind of custom JS that would show or hide these elements in each specific view of the device. However, I did not know how to determine which device I was using at that time.

Thoughts?

Thank you in advance

Answer 1

If you want to know what environment you are working in, try using Bootstrap's own CSS classes. Create an element, add it to the page, apply its helper classes and check if it is hidden to determine the current environment. The following function uses jQuery to do this:

Bootstrap 3

function findBootstrapEnvironment() { var envs = ['xs', 'sm', 'md', 'lg']; var $el = $('<div>'); $el.appendTo($('body')); for (var i = envs.length - 1; i >= 0; i--) { var env = envs[i]; $el.addClass('hidden-'+env); if ($el.is(':hidden')) { $el.remove(); return env; } } } 

---

Bootstrap 2

 function findBootstrapEnvironment() { var envs = ['phone', 'tablet', 'desktop']; var $el = $('<div>'); $el.appendTo($('body')); for (var i = envs.length - 1; i >= 0; i--) { var env = envs[i]; $el.addClass('hidden-'+env); if ($el.is(':hidden')) { $el.remove(); return env; } } } 

Answer 2

Based on the answers of @Raphael_ and @ user568109, in Bootstrap 3, it now reacts.

To determine the type of device in Javascript, create an object that appears only on the device you need using the Bootstrap Responsive classes. Then check its property :hidden .

Example:

• Create a <div> panel with no content to display on anything larger than the eXtra Small device (thanks to @Mario Awad):

   <div id="desktopTest" class="hidden-xs"></div> 

  or to exclude specific devices:

   <div id="desktopTest" class="visible-sm visible-md visible-lg"></div> 

• Check the value of #desktopTest :

   if ($('#desktopTest').is(':hidden')) { // device is == eXtra Small } else { // device is >= SMaller } 

Answer 3

Based on @Alastair McCormack answer, I suggest you use this code

 <div class="visible-xs hidden-sm hidden-md hidden-lg">xs</div> <div class="hidden-xs visible-sm hidden-md hidden-lg">sm</div> <div class="hidden-xs hidden-sm visible-md hidden-lg">md</div> <div class="hidden-xs hidden-sm hidden-md visible-lg">lg</div> 

Just add it to the end of your div container, you will get simple dynamic information about the current view.

Answer 4

I originally wrote the answer here , a solution for Bootstrap v.4 .

Bootstrap 4, JS breakpoint detection

 /** * Detect and return the current active responsive breakpoint in Bootstrap * @returns {string} */ function getResponsiveBreakpoint() { var envs = ["xs", "sm", "md", "lg"]; var env = ""; var $el = $("<div>"); $el.appendTo($("body")); for (var i = envs.length - 1; i >= 0; i--) { env = envs[i]; $el.addClass("d-" + env + "-none"); if ($el.is(":hidden")) { break; // env detected } } $el.remove(); return env; } 

Answer 5

My answer uses a similar mechanism, similar to the one provided by @Raphael_, however you can work a bit with it. See this answer for more details and run the github repository project for the most updated version.

Breakpoint detection example:

 if ( viewport.is('xs') ) { // do stuff in the lowest resolution } 

Code execution when resizing a window (without repeating it for several milliseconds):

 $(window).bind('resize', function() { viewport.changed(function() { // do some other stuff! }) }); 

Answer 6

Bootstrap 4

(currently for Beta and, hopefully, for Release also in the future)

This is a modified version based on rmobis (Bootstrap 2/3) and Farside (Bootstrap 4)

 /* * Detect and return the current active responsive breakpoint in Bootstrap 4 * * @returns {string} * xs: Extra small (< 576px) * sm: Small (576px ≥ X < 768px) * md: Medium (768px ≥ X < 992px) * lg: Large (992px ≥ X < 1200px) * xl: Extra large (≥ 1200 px) */ function getResponsiveBreakpoint() { var envs = ["sm", "md", "lg", "xl"]; var env = ""; var $el = $("<div>"); $el.appendTo($("body")); $el.addClass("d-block"); for (var i = envs.length - 1; i >= 0; i--) { env = envs[i]; $el.addClass("d-" + env + "-none"); if ($el.is(":hidden")) { $el.remove(); return env; } } $el.remove(); return "xs"; //extra small } 

Answer 7

A niche case, but you can apply @ Kar.ma to Mediawiki with Chameleon (bootstrap skin). Pass the "results" of the DIV as an argument to the template, then test it in the template.

Answer 8

Combining the answers from above, this works for me:

 function findBootstrapDeviceSize() { var dsize = ['lg', 'md', 'sm', 'xs']; for (var i = dsize.length - 1; i >= 0; i--) { // Need to add &nbsp; for Chrome. Works fine in Firefox/Safari/Opera without it. // Chrome seem to have an issue with empty div's $el = $('<div id="sizeTest" class="hidden-'+dsize[i]+'">&nbsp;</div>'); $el.appendTo($('body')); if ($el.is(':hidden')) { $el.remove(); return dsize[i]; } } return 'unknown'; }