Comment désactiver un module 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 Responsive Web Design conjointement avec Adaptive Web Design (c'est-à-dire - une conception qui ajuste l'affichage pour tous les périphériques et fournit un contenu basé sur la taille du port d'affichage) par opposition à des 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 plus petites tailles de fenêtres. Cependant, dans le cas où un module est masqué en fonction de la taille de la fenêtre d'affichage, le chargement et l'exécution de ce module entraînent des conséquences inutiles sur les performances lorsqu'il est connu que le module spécifique ne sera jamais affiché avec une taille de fenêtre d'affichage inférieure.
Comment puis-je utiliser la taille de la fenêtre d'affichage pour désactiver efficacement un module (c'est-à-dire l'empêcher de s'exécuter) afin d'améliorer les performances?
Advanced Module Manager ( http://www.nonumber.nl/extensions/advancedmodulemanager ) vous permet d’affecter des modules en fonction du type de navigateur TYPE. 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 aussi être possible avec une combinaison de php et javascript. Je vais envoyer cette question à mon pote, il a peut-être une idée.
Je ne pense pas que vous devriez désactiver des modules de ce type et continuer à parler de conception réactive. Une partie de l’essentiel avec responsive est qu’elle répondra aux modifications de la fenêtre d’affichage et pas seulement qu’elle imprime une disposition différente pour des tailles d’écran différentes.
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.
Ceci est une classe JS que j'ai faite il y a quelque temps et qui pouvait utiliser javascript pour détecter les fenêtres de visualisation. 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 ça
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 la saisie 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. Ceci peut être utilisé pour charger des modules via ajax en fonction de la fenêtre. Je pense que com_ajax de joomla peut être utilisé avec cela pour créer des fonctionnalités vraiment sympas.
Une autre solution:
Vous pouvez utiliser une détection de périphérique côté serveur comme ceci: 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 php si vous aimez les déclarations que vous aimiez, quelle que soit leur résolution.
Si vous souhaitez accélérer les performances, ne chargez pas de modules inutiles. Si ce n'est pas nécessaire sur les petits écrans, cela ne l'est pas non plus sur les grands écrans.
Les personnes disposant d’affichages plus importants souhaitent également un site Web rapide qui ne charge pas inutilement les clients. 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 donnez à tous vos utilisateurs une expérience de site optimisée, quelle que soit la taille de leur écran.
J'utilise généralement css @media pour y arriver. Simplifie le fait de masquer des éléments en fonction de la taille de l’écran et de les faire analyser pour les moments où une tablette paysage est suffisamment large pour le montrer, contrairement à la largeur du portrait. Voici un exemple:
@media (max-width:699px) {
#moduleid, .modulewrapperclass {display:none}
}
J'utilise généralement ceci pour masquer une position entière du module, je base donc mon sélecteur css sur le wrapper de cette position (ou des positions dans certains modèles).
Je suggérerais que renifler le navigateur est la mauvaise façon d'aller ici. Si vous voulez vraiment charger uniquement des modules en fonction de la largeur de l'écran, vous devez exécuter du javascript, qui appelle ensuite le module par AJAX (com_ajax). N'oubliez pas qu'il peut y avoir un gain. en termes d'optimisation des moteurs de recherche pour le contenu chargé par AJAX.
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 de module en combinaison avec des requêtes multimédia. De nombreux frameworks de templates ont déjà intégré cela, où vous pouvez ajouter une classe de "téléphones cachés" pour ne pas les afficher sur mobile. Ils les appellent les 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