web-dev-qa-db-fra.com

Comment détecter la vue de l'appareil sur laquelle vous vous trouvez, utilisez l'aide de l'API Twitter Bootstrap

Je viens de commencer à m'amuser avec l'API Twitter Bootstrap pour un projet que je prépare. La navigation principale contient 3 éléments principaux:

  • site nav
  • liens sociaux nav
  • rechercher sur le site

J'utilise le plugin collapse pour réduire le formulaire de navigation et de recherche du site lors de l'affichage du site sur des appareils mobiles. La vue mobile dispose de 2 boutons qui permettent d’activer/désactiver le formulaire de recherche ou le navigateur principal lorsque vous cliquez dessus.

Cependant, si je bascule le formulaire de recherche et redimensionne ensuite mon navigateur pour le voir, le formulaire de recherche est toujours masqué dans cette vue?

J'ai lu sur l'utilisation de classes telles que visible-mobile, etc., mais celles-ci semblent se heurter au plugin collapse. Je me suis aussi rendu compte que je pourrais probablement écrire mes propres hacks CSS pour résoudre ce problème, mais je me suis dit que je demanderais s'il existe une solution plus simple.

Bootstrap contient des événements à afficher, afficher, masquer et masquer. Je me suis donc dit que je pourrais peut-être écrire un JS personnalisé qui afficherait ou masquerait ces éléments dans chaque vue de périphérique particulière. Cependant, je ne savais pas comment détecter le périphérique que j'utilisais à l'époque.

Pensées?

Merci d'avance

javascripttwitter-bootstrapdevice-detection
54
James Howell

Si vous voulez savoir dans quel environnement vous êtes, essayez d'utiliser les propres classes CSS de Bootstrap. Créez un élément, ajoutez-le à la page, appliquez ses classes auxiliaires et vérifiez s'il est masqué pour déterminer s'il s'agit de l'environnement actuel. La fonction suivante fait exactement cela:

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

S'appuyant sur les réponses de @Raphael_ et @ user568109, dans Bootstrap 3, Responsive est désormais intégré. 

Pour détecter le type de périphérique en Javascript, créez un objet uniquement affiché sur le périphérique requis à l'aide des classes Responsive de Bootstrap. Puis vérifiez sa propriété :hidden.

Exemple:

  1. Créez un panneau <div> sans contenu qui ne soit affiché sur un élément plus grand qu'un périphérique eXtra Small (grâce à @Mario Awad):

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

    ou , pour exclure des périphériques spécifiques:

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

  2. Vérifier la valeur de #desktopTest:

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

Basé sur la réponse de @Alastair McCormack, je vous suggère d'utiliser ce 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>

Ajoutez-le simplement à la fin de votre conteneur, vous obtiendrez une information dynamique simple sur la vue actuelle.

4
Kar.ma

Ma réponse utilise un mécanisme similaire à celui présenté par @Raphael_, mais vous pouvez en faire un peu plus. Veuillez vous référer à cette réponse pour plus de détails et au référentiel du projet github pour la version la plus récente.

Exemple de détection de point d'arrêt:

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

Exécuter du code lors du redimensionnement de la fenêtre (sans que cela se produise plusieurs fois en quelques millisecondes):

$(window).bind('resize', function() {
    viewport.changed(function() {

      // do some other stuff!

    })
});
3
Maciej Gurban

Cas de niche, mais vous pouvez appliquer @ Kar.ma à un Mediawiki avec Chameleon (peau d'amorçage) installé. Transmettez les "résultats" de la DIV en tant qu'argument de modèle, puis testez-les dans le modèle.

0
Skonesam