javascript - How to detect which device view you're on using Twitter Bootstrap API?

Question

I have just started to play around with Twitter Bootstrap API for a project I have coming up. The main nav contains 3 main elements:

• site nav
• social links nav
• search the site form

I am using the collapse plugin to collapse the site nav and search form when viewing the site on mobile devices. The mobile view has 2 buttons which when clicked toggle the search form or main nav on/off.

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

I have read about using classes such as visible-mobile etc but these seem to clash with the collapse plugin. I also realise I could probably write my own CSS hacks to fix this but thought I'd ask if there was an easier solution.

Bootstrap has events for show, shown, hide and hidden so I thought maybe I could write some custom JS which would show or hide these items in each particular device view. However I didn't know how to detect which device I'm using at the time.

Thoughts?

Thanks in advance

Answer 1

If you want to know what environment you're on, try using Bootstrap's own CSS classes. Create an element, add it to the page, apply its helper classes and check if it's hidden to determine if that's the current environment. The following function does just that:

Bootstrap 4

function findBootstrapEnvironment() {
    let envs = ['xs', 'sm', 'md', 'lg', 'xl'];

    let el = document.createElement('div');
    document.body.appendChild(el);

    let curEnv = envs.shift();

    for (let env of envs.reverse()) {
        el.classList.add(`d-${env}-none`);

        if (window.getComputedStyle(el).display === 'none') {
            curEnv = env;
            break;
        }
    }

    document.body.removeChild(el);
    return curEnv;
}

---

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;
        }
    }
}