Jak można wyłączyć moduł w oparciu o rozmiar urządzenia lub rzutni w Joomla 3, aby zoptymalizować wydajność dla urządzeń mobilnych?

Jestem zwolennikiem Responsive Web Design w połączeniu z Adaptive Web Design (tj. - jednym projektem, który dostosowuje wyświetlanie dla wszystkich urządzeń i zapewnia zawartość na podstawie rozmiaru portu widoku), w przeciwieństwie do oddzielnych projektów stron „mobilnych”.

Istnieją pewne wady, na przykład w przypadku dużych wyświetlaczy. Chciałbym uwzględnić niektóre moduły, które będą ukryte dla mniejszych rozmiarów rzutni. Jednak w przypadku, gdy moduł jest ukryty w oparciu o rozmiar rzutni, załadowanie i wykonanie tego modułu powoduje niepotrzebne obniżenie wydajności, gdy wiadomo, że określony moduł nigdy nie będzie wyświetlany w mniejszym rozmiarze rzutni.

Jak mogę użyć rozmiaru rzutni, aby skutecznie wyłączyć moduł (tj. Zatrzymać jego wykonywanie) w celu przyspieszenia wydajności?

Advanced Module Manager ( http://www.nonumber.nl/extensions/advancedmodulemanager ) pozwala przypisywać moduły w oparciu o TYP przeglądarki. Możesz więc wybrać urządzenie mobilne, stacjonarne lub określone urządzenie. Nie pozwala jednak na wybór rozmiaru, więc jest użyteczny tylko do pewnego stopnia.

Może to być również możliwe dzięki kombinacji php i javascript. Wyślę to pytanie do mojego kumpla, on może mieć pomysł.

Nie sądzę, że powinieneś wyłączać takie moduły i nadal nazywać to responsywnym projektowaniem. Czułość polega na tym, że reaguje na zmiany rzutni, a nie tylko drukuje inny układ dla różnych rozmiarów ekranu.

W zależności od przykładowych rozmiarów ekranu możliwe jest, że tablet w trybie pionowym spowoduje, że moduł się nie załaduje, ale wtedy ten sam tablet może potrzebować tej zawartości raz w trybie poziomym.

Jest to klasa JS, którą stworzyłem jakiś czas temu, która może używać javascript do wykrywania rzutni, nigdy nie została poddana rygorystycznym testom, ale działa.

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

Zasadniczo używasz go w ten sposób

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

Punkt przerwania ma parametry min./maks. Dla szerokości, a następnie łańcuchową funkcję wprowadzania i wychodzenia, z wywołaniem zwrotnym do uruchomienia kodu JS.

Nie mogę szczegółowo opisać, jak to działa, ponieważ zrobiłem to tak dawno temu, ale możesz go użyć, jeśli to pomoże. Można tego użyć do załadowania modułów poprzez ajax na podstawie rzutni. Wierzę, że com_ajax joomla może być używany z tym, aby stworzyć naprawdę fajne funkcje.

Inne rozwiązanie:

Możesz użyć wykrywania po stronie serwera w następujący sposób: http://mobiledetect.net/ tutaj wtyczka Joomla http://www.yagendoo.com/en/blog/free-mobile-detection-plugin-for-joomla.html a następnie rozszerz joomla / templates / yourtemplate / html / modules.php o własny styl mod_chrome. Następnie możesz napisać tyle php, jeśli lubisz instrukcje dla dowolnego urządzenia lub rozdzielczości.

Jeśli chcesz przyspieszyć działanie, nie ładuj niepotrzebnych modułów. Jeśli nie jest to konieczne na małych ekranach, nie jest również konieczne na większych ekranach.

Ludzie z większymi wyświetlaczami urządzeń również chcą szybkiej witryny, która nie ładuje zbędnego cruftu. Przyjmujesz błędne założenie, że większe ekrany mają dostępną większą przepustowość. Oni nie.

Bądź dobrym projektantem i zapewnij wszystkim użytkownikom zoptymalizowaną obsługę witryny, niezależnie od wielkości ekranu.

Sugerowałbym, że wąchanie przeglądarki jest niewłaściwą drogą do przejścia tutaj. Jeśli naprawdę chcesz ładować moduły tylko na podstawie szerokości ekranu, musisz uruchomić javascript, który następnie wywołuje moduł przez AJAX (com_ajax). Pamiętaj, że optymalizacja wyszukiwarek pod kątem treści ładowanych przez AJAX może być opłacalna.

Zazwyczaj używam css @media, aby tak się stało. Ułatwia ukrywanie rzeczy w zależności od rozmiaru ekranu i analizowanie ich w sytuacjach, gdy tablet poziomy jest wystarczająco szeroki, aby go pokazać, a szerokość pionowa nie. Oto przykład:

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

Zwykle używam tego, aby ukryć całą pozycję modułu, więc opieram mój selektor css na opakowaniu tej pozycji (lub pozycji w niektórych szablonach).

Możesz załadować go na żądanie za pomocą jakiegoś javascript, który wywołuje com_ajax i zwraca tylko moduły dla bieżącego rozmiaru.

Możesz użyć sufiksu modułu w połączeniu z zapytaniami o media. Wiele ram szablonów ma już tę wbudowaną funkcję, w której można dodać klasę „ukrytego telefonu”, aby nie wyświetlały się na urządzeniach mobilnych. Nazywają je klasami 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