Comment un module peut-il être désactivé en fonction de la taille de l'appareil ou de la fenêtre d'affichage dans Joomla 3 pour optimiser les performances des appareils mobiles?

Je suis un partisan de la conception Web adaptative en conjonction avec la conception Web adaptative (c'est-à-dire - une conception qui ajuste l'affichage pour tous les appareils et fournit du contenu en fonction de la taille du port d'affichage) par opposition aux conceptions de sites «mobiles» distinctes.

Il y a certains inconvénients, par exemple, sur les grands écrans, j'aimerais inclure certains modules qui seront masqués pour les tailles de fenêtre plus petites. Cependant, dans le cas où un module est masqué en fonction de la taille de la fenêtre, le chargement et l'exécution de ce module entraînent un impact inutile sur les performances lorsqu'il est connu que le module spécifique ne sera jamais affiché avec une taille de fenêtre plus petite.

Comment puis-je utiliser la taille de la fenêtre pour désactiver efficacement un module (c'est-à-dire l'empêcher de s'exécuter) afin d'accélérer les performances?

Advanced Module Manager ( http://www.nonumber.nl/extensions/advancedmodulemanager ) vous permet d'affecter des modules en fonction du TYPE de navigateur. Vous pouvez donc sélectionner un mobile, un ordinateur de bureau ou un appareil spécifique. Cependant, il ne vous permet pas de choisir par taille, il n'est donc utile que dans une certaine mesure.

Cela peut également être possible avec une combinaison de php et de javascript. J'enverrai cette question à mon pote, il a peut-être une idée.

Je ne pense pas que vous devriez désactiver des modules comme ça et l'appeler toujours responsive design. Une partie du point avec responsive est qu'il répondra aux changements de fenêtre et pas seulement qu'il imprime une disposition différente pour différentes tailles d'écran.

Selon les exemples de tailles d'écran, il est possible qu'une tablette en mode portrait empêche le module de se charger, mais cette même tablette peut avoir besoin de ce contenu une fois en mode paysage.

Il s'agit d'une classe JS que j'ai créée il y a quelque temps et qui pourrait utiliser le javascript pour détecter les fenêtres, elle n'a jamais été soumise à des tests rigoureux mais fonctionne.

function ResJS(){
    this.min = 0;
    this.max = 0;
    this.config = config;
    this.width = function(){
        return jQuery(window).width();
    }
    this.breakpoint = function(min,max){
        this.min = min;
        this.max = max;
        this.outside = false;
        this.inside = false;
        this.triggeredOut = false;
        this.triggeredIn = false;
        this.enter = function(callback){
            var context = this;
            jQuery(window).on('resize',function(){
                if(context.min<context.width()&&context.max>context.width()){
                    if(!context.triggeredIn){
                        jQuery(document).ready(function(){callback(context.min,context.max)});
                        context.inside = true; //browser width has entered breakpoint
                        context.outside = false; //browser has left another breakpoint
                        context.triggeredIn = true; //triggered event for breakpoint
                        context.triggeredOut = false; //be ready to trigger leave event
                    }
                }else{
                    context.inside = false; //browser width is not within breakpoint
                    context.outside = true; //brower width is outside of breakpoint
                }
            });
            if(context.min<context.width()&&context.max>context.width()){
                jQuery(document).ready(function(){callback(context.min,context.max)});
                context.inside = true;
                context.outside = false;
                context.triggeredIn = true;
                context.triggeredOut = false;
            }else{
                context.inside = false;
                context.outside = true;
                context.triggeredOut = true;
                context.triggeredIn = false;
            }
            return this;
        }
        this.leave = function(callback){
            var context = this;
            jQuery(window).on('resize',function(){
                if(context.outside&&!context.triggeredOut){
                    jQuery(document).ready(function(){callback(context.min,context.max)});
                    context.triggeredIn = false;
                    context.triggeredOut = true;
                }
            });     
            return this;
        }
        return this;
    }
    return this;
}

Fondamentalement, vous l'utilisez comme ceci

ResJS()
    .breakpoint(0,600)
    .enter(function(min,max){
        console.log(min,max,'enter');
    })
    .leave(function(min,max){
        console.log(min,max,'leave');
    });

Le point d'arrêt a des paramètres min / max pour la largeur, puis une fonction chaînée pour l'entrée et la sortie, avec un rappel pour exécuter du code JS.

Je ne peux pas vous expliquer en détail comment cela fonctionne, comme je l'ai fait il y a si longtemps, mais vous êtes libre de l'utiliser si cela peut vous aider. Cela peut être utilisé pour charger des modules via ajax en fonction de la fenêtre d'affichage. Je crois que com_ajax de joomla peut être utilisé avec cela pour créer des fonctionnalités vraiment cool.

Une autre solution:

Vous pouvez utiliser une détection de périphérique côté serveur comme celle-ci: http://mobiledetect.net/ ici le plugin Joomla http://www.yagendoo.com/en/blog/free-mobile-detection-plugin-for-joomla.html puis étendez joomla / templates / yourtemplate / html / modules.php avec votre propre style mod_chrome. Ensuite, vous pouvez écrire autant de déclarations php que vous le souhaitez pour n'importe quel appareil ou résolution.

Si vous souhaitez accélérer les performances, ne chargez pas les modules inutiles. Si ce n'est pas nécessaire sur les petits écrans, il n'est pas non plus nécessaire sur les grands écrans.

Les personnes disposant d'un écran plus grand souhaitent également un site Web rapide qui ne charge pas de fichiers inutiles. Vous faites l'hypothèse erronée que les écrans plus grands ont plus de bande passante disponible. Ils ne le font pas.

Soyez un bon concepteur et offrez à tous vos utilisateurs une expérience de site optimisée, quelle que soit la taille de leur écran.

Je dirais que le reniflement du navigateur est la mauvaise façon d'aller ici. Si vous voulez vraiment charger uniquement les modules en fonction de la largeur de l'écran, vous devez exécuter du javascript, qui appelle ensuite le module par AJAX (com_ajax). Gardez à l'esprit qu'il peut y avoir un gain en termes d'optimisation des moteurs de recherche pour le contenu chargé par AJAX.

J'utilise généralement css @media pour y arriver. Permet de masquer les choses en fonction de la taille de l'écran et de les faire analyser pendant les périodes où une tablette paysage est suffisamment large pour l'afficher et la largeur du portrait ne l'est pas. Voici un exemple:

@media (max-width:699px) {
    #moduleid, .modulewrapperclass {display:none}
}

Je l'utilise généralement pour masquer une position de module entière, donc je base mon sélecteur CSS sur le wrapper de cette position (ou des positions dans certains modèles).

Vous pouvez le charger à la demande en utilisant du javascript qui appelle com_ajax et renvoie uniquement les modules pour la taille actuelle.

Vous pouvez utiliser le suffixe du module en combinaison avec les requêtes multimédias. Beaucoup de frameworks de modèles ont déjà intégré où vous pouvez ajouter une classe de "téléphone caché" pour ne pas les afficher sur mobile. Ils les appellent classes CSS Helper:

GANTRY: http://www.gantry-framework.org/documentation/joomla/advanced/responsive_grid_system.md

WARP: http://www.yootheme.com/blog/2012/06/12/warp-gets-responsive