it-swarm.dev

Come si può disabilitare un modulo in base alla dimensione del dispositivo o della finestra in Joomla 3 per ottimizzare le prestazioni dei dispositivi mobili?

Sono un sostenitore di Responsive Web Design in collaborazione con Adaptive Web Design (ovvero un design che regola la visualizzazione per tutti i dispositivi e fornisce contenuti in base alle dimensioni della porta di visualizzazione) rispetto a progetti di siti "mobili" separati.

Ci sono alcuni svantaggi, ad esempio, su schermi di grandi dimensioni che vorrei includere alcuni moduli che verranno nascosti per dimensioni della finestra più piccole. Tuttavia, nel caso in cui un modulo sia nascosto in base alle dimensioni della finestra, il caricamento e l'esecuzione di quel modulo causano un inutile impatto sulle prestazioni quando è noto che il modulo specifico non verrà mai visualizzato con dimensioni della finestra più piccole.

Come posso utilizzare le dimensioni della finestra per disabilitare efficacemente un modulo (ovvero impedirne l'esecuzione) al fine di accelerare le prestazioni?

14
NivF007

Advanced Module Manager ( http://www.nonumber.nl/extensions/advancedmodulemanager ) ti consente di assegnare moduli in base al tipo di browser. Quindi è possibile selezionare dispositivi mobili, desktop o specifici. Tuttavia, non ti consente di scegliere per dimensione, quindi è utile solo fino a un certo punto.

Potrebbe anche essere possibile con una combinazione di php e javascript. Manderò questa domanda al mio amico, potrebbe avere un'idea.

15
Faye

Non penso che dovresti disabilitare moduli del genere e chiamarlo comunque responsive design. Parte del punto con reattivo è che risponderà ai cambiamenti di viewport e non solo che stampa un layout diverso per schermi di dimensioni diverse.

A seconda delle dimensioni dello schermo di esempio, è possibile che un tablet in modalità verticale non carichi il modulo ma che lo stesso tablet potrebbe aver bisogno di quel contenuto una volta in modalità orizzontale.

10
Spunkie

Questa è una classe JS che ho creato qualche tempo fa che potrebbe utilizzare JavaScript per rilevare i viewport, non è mai stata sottoposta a test rigorosi ma funziona.

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

Fondamentalmente lo usi in questo modo

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

Breakpoint ha parametri min/max per la larghezza, quindi una funzione concatenata per immetterlo e uscire, con un callback per eseguire un codice JS.

Non posso andare in dettaglio su come funziona, come ho fatto tanto tempo fa, ma sei libero di usarlo se sarà di aiuto. Questo può essere usato per caricare i moduli tramite Ajax in base al viewport. Credo che com_ajax di joomla possa essere utilizzato con questo per creare alcune funzioni davvero interessanti.

8
Jordan Ramstad

Un'altra soluzione:

È possibile utilizzare un rilevamento del dispositivo lato server in questo modo: http://mobiledetect.net/ qui il plug-in Joomla http://www.yagendoo.com/en/blog/free- mobile-detect-plugin-for-joomla.html e quindi estendi joomla/templates/yourtemplate/html/modules.php con il tuo stile mod_chrome. Quindi puoi scrivere quante istruzioni php se ti piacciono per qualsiasi dispositivo o risoluzione.

3
Joomla Agency

Se si desidera accelerare le prestazioni, non caricare moduli non necessari. Se non è necessario su schermi piccoli, non è necessario nemmeno su schermi più grandi.

Le persone con display di dispositivi più grandi vogliono anche un sito Web veloce che non carichi inutili trapianti. Stai assumendo l'erroneo presupposto che schermi più grandi abbiano più larghezza di banda disponibile. Non lo fanno.

Sii un buon designer e offri a tutti i tuoi utenti un'esperienza del sito ottimizzata, indipendentemente dalle dimensioni dello schermo.

3
Seth Warburton

In genere uso css @media per farlo accadere. Rende semplice nascondere le cose in base alle dimensioni dello schermo e farle analizzare per le volte in cui una tavoletta orizzontale è abbastanza ampia da mostrarla e la larghezza del ritratto non lo è. Ecco un esempio:

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

Di solito lo uso per nascondere un'intera posizione del modulo, quindi baso il mio selettore CSS sull'involucro di quella posizione (o posizioni in alcuni modelli).

2
pathfinder

Vorrei suggerire che lo sniffing del browser è il modo sbagliato di andare qui. Se vuoi davvero caricare solo i moduli in base alla larghezza dello schermo, devi eseguire javascript, che quindi chiama il modulo con AJAX (com_ajax). Tieni presente che potrebbe esserci un payoff in termini di ottimizzazione dei motori di ricerca per i contenuti caricati da AJAX.

2
Jeepstone

È possibile caricarlo su richiesta utilizzando alcuni javascript che chiama com_ajax e restituisce solo i moduli per la dimensione corrente.

1
Harald Leithner

È possibile utilizzare il suffisso del modulo in combinazione con le query multimediali. Molti framework di template hanno questo built-in in cui è possibile aggiungere una classe di "telefono nascosto" per non visualizzarli sul cellulare. Li chiamano classi 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

0
YellowWebMonkey