Wie kann ein Modul basierend auf der Größe des Geräts oder des Ansichtsfensters in Joomla 3 deaktiviert werden, um die Leistung für Mobilgeräte zu optimieren?

Ich bin ein Befürworter von Responsive Web Design in Verbindung mit Adaptive Web Design (dh ein Design, das die Anzeige für alle Geräte anpasst und Inhalte basierend auf der Größe des Ansichtsports bereitstellt) im Gegensatz zu separaten Designs für mobile Websites.

Es gibt einige Nachteile, zum Beispiel bei großen Bildschirmen. Ich möchte einige Module einbinden, die für kleinere Ansichtsfenster ausgeblendet werden. Jedoch in dem Fall , in dem ein Modul versteckt basiert auf der Anzeigengröße, Laden und das Modul der Ausführung bewirkt eine unnötigen Leistungseinbußen , wenn bekannt ist , dass das spezifische Modul wird nie in einer kleineren Darstellungsgröße angezeigt werden.

Wie kann ich die Größe von Ansichtsfenstern verwenden, um ein Modul effektiv zu deaktivieren (dh die Ausführung zu stoppen), um die Leistung zu beschleunigen?

Mit Advanced Module Manager ( http://www.nonumber.nl/extensions/advancedmodulemanager ) können Sie Module basierend auf dem Browsertyp zuweisen. Sie können also ein Mobilgerät, einen Desktop oder ein bestimmtes Gerät auswählen. Es erlaubt Ihnen jedoch nicht, nach Größe zu wählen, so dass es nur bis zu einem gewissen Grad nützlich ist.

Möglicherweise ist dies auch mit einer Kombination aus PHP und Javascript möglich. Ich werde diese Frage an meinen Kumpel senden, er könnte eine Idee haben.

Ich denke nicht, dass Sie solche Module deaktivieren und es dennoch als responsives Design bezeichnen sollten. Ein Aspekt von responsive ist, dass es auf Änderungen im Ansichtsfenster reagiert und nicht nur ein anderes Layout für verschiedene Bildschirmgrößen druckt.

Abhängig von der Bildschirmgröße des Beispiels kann es vorkommen, dass ein Tablet im Hochformat das Modul nicht lädt, dass dasselbe Tablet diesen Inhalt jedoch möglicherweise einmal im Querformat benötigt.

Dies ist eine JS-Klasse, die ich vor einiger Zeit erstellt habe und die JavaScript zum Erkennen von Ansichtsfenstern verwenden konnte. Sie wurde noch nie strengen Tests unterzogen, funktioniert aber.

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

Grundsätzlich benutzt du es so

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

Haltepunkt hat Min / Max-Parameter für Breite, dann eine verkettete Funktion zum Eingeben und Verlassen, mit einem Rückruf, um etwas JS-Code auszuführen.

Ich kann nicht im Detail erläutern, wie es funktioniert, da ich es vor so langer Zeit gemacht habe, aber Sie können es kostenlos verwenden, wenn es helfen wird. Dies kann verwendet werden, um Module basierend auf dem Ansichtsfenster über Ajax zu laden. Ich glaube, mit joomlas com_ajax können einige wirklich coole Funktionen erstellt werden.

Eine andere Lösung:

Sie können eine serverseitige Geräteerkennung wie diese verwenden: http://mobiledetect.net/ hier das Joomla-Plugin http://www.yagendoo.com/de/blog/free-mobile-detection-plugin-for-joomla.html und erweitern Sie dann die joomla / templates / yourtemplate / html / modules.php mit Ihrem eigenen mod_chrome-Stil. Dann können Sie beliebig viele PHP if-Anweisungen für jedes Gerät oder jede Auflösung schreiben.

Wenn Sie die Leistung steigern möchten, laden Sie keine unnötigen Module. Wenn es auf kleinen Bildschirmen nicht erforderlich ist, ist es auch auf größeren Bildschirmen nicht erforderlich.

Menschen mit größeren Gerätedisplays möchten auch eine schnelle Website, auf der keine unnötigen Daten geladen werden. Sie gehen fälschlicherweise davon aus, dass auf größeren Bildschirmen mehr Bandbreite zur Verfügung steht. Sie tun es nicht.

Seien Sie ein guter Designer und geben Sie Ihren Benutzern unabhängig von der Bildschirmgröße eine optimierte Website-Erfahrung.

Ich würde vorschlagen, dass Browser-Sniffing der falsche Weg ist, um hierher zu kommen. Wenn Sie wirklich nur Module basierend auf der Bildschirmbreite laden möchten, müssen Sie Javascript ausführen, das dann das Modul von AJAX (com_ajax) aufruft. Beachten Sie, dass sich die Suchmaschinenoptimierung für von AJAX geladene Inhalte auszahlen kann.

Im Allgemeinen verwende ich css @media, um dies zu ermöglichen. Macht es einfach, Dinge abhängig von der Bildschirmgröße auszublenden und sie analysieren zu lassen, wenn ein Querformat-Tablet breit genug ist, um sie anzuzeigen, und die Hochformat-Breite nicht. Hier ist ein Beispiel:

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

Normalerweise verwende ich dies, um eine gesamte Modulposition auszublenden, sodass ich meinen CSS-Selektor auf den Wrapper dieser Position (oder Positionen in einigen Vorlagen) stütze.

Sie können es bei Bedarf mit JavaScript laden, das com_ajax aufruft und nur die Module für die aktuelle Größe zurückgibt.

Sie können das Modulsuffix in Kombination mit Medienabfragen verwenden. In vielen Vorlagen-Frameworks ist dies bereits integriert, sodass Sie eine Klasse von "versteckten Telefonen" hinzufügen können, damit sie nicht auf Mobilgeräten angezeigt werden. Sie nennen sie CSS Helper Klassen:

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