it-swarm.com.de

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 (d. H. 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 aufgrund der Größe des Ansichtsfensters ausgeblendet ist, führt das Laden und Ausführen dieses Moduls zu einem unnötigen Leistungseinbruch wenn bekannt ist, dass das betreffende Modul niemals in einer kleineren Ansichtsfenstergröße angezeigt wird.

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

14
NivF007

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.

15
Faye

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 den Bildschirmgrößen des Beispiels kann es vorkommen, dass ein Tablet im Hochformat das Modul nicht lädt, dass jedoch dasselbe Tablet diesen Inhalt einmal im Querformat benötigt.

10
Spunkie

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

Breakpoint hat Min/Max-Parameter für width, 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.

8
Jordan Ramstad

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 erweitere dann die joomla/templates/yourtemplate/html/modules.php mit deinem eigenen mod_chrome-Stil. Dann können Sie beliebig viele PHP if-Anweisungen für jedes Gerät oder jede Auflösung schreiben.

3
Joomla Agency

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.

3
Seth Warburton

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.

2
pathfinder

Ich würde vorschlagen, dass Browser-Sniffing der falsche Weg ist, um hierher zu kommen. Wenn Sie wirklich nur Module laden möchten, die auf der Bildschirmbreite basieren, müssen Sie JavaScript ausführen, das das Modul dann mit AJAX (com_ajax) aufruft. Beachten Sie, dass möglicherweise eine Auszahlung erfolgt in Bezug auf die Suchmaschinenoptimierung für von AJAX geladene Inhalte.

2
Jeepstone

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.

1
Harald Leithner

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

0
YellowWebMonkey