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


14

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?

Odpowiedzi:


15

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ł.


Co za fajny pomysł, nigdy nie myślałem o użyciu AMM w ten sposób.
jackJoe

Peter włożył w AMM wiele niesamowitych funkcji, moim zdaniem jest to konieczność.
Faye,

Zgadzam się z tym. Jeśli utknąłem z motywem, który nie ma tego wbudowanego (na przykład motywy warp 7 mają to wbudowane), wtedy użyłbym AMM.
Brian Peat

@BrianPeat - czy możesz podać dalsze szczegóły dotyczące tego, jak to działa z WARP7?
NivF007

3
Warp 7 ma panel w szablonie administratora, który pozwala klikać przyciski na pulpicie / tablecie / telefonie oraz włącza i wyłącza moduły na podstawie tych ustawień. Motyw rakiety robi coś podobnego z klasami specjalnymi. Nie wiem, czy moduły są rozładowane, czy wszystko jest załadowane, a następnie po prostu ukryte. Podejrzewam, że to ten drugi, ponieważ widać, że zmienia się on podczas zmiany rozmiaru przeglądarki. Jeśli całkowicie odciążysz rzeczy w oparciu o rozmiar, co zrobisz, jeśli aktywnie zmienisz rozmiar okna?
Brian Peat

10

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.


3
To prawda, ale w praktyce nie jest tak naprawdę skuteczna. Oznacza to, że użytkownik iPhone'a nigdy nie będzie miał rozdzielczości ekranu 1440 x 900, ani nie będzie miał nawet możliwości zmiany rozmiaru swojego obszaru wyświetlania. Elastyczne projektowanie, w którym ludzie wyglądają jak „och, patrz, jak się zmieniają, gdy zmieniam rozmiar okna przeglądarki” jest naprawdę skuteczne tylko dla projektantów, którzy chcą się pochwalić. W praktyce podejście do wyłączania modułów i zmieniania wyjścia dla różnych rozmiarów ekranu jest całkowicie w porządku.
Don Gilbert

3
@Don Niestety nie jest to po prostu responsywny projekt, a na komputerze jest wiele osób, które korzystają z funkcji zmiany rozmiaru podczas pracy w systemie Windows. Elastyczny projekt reaguje na zmiany rzutni, niezależnie od tego, czy pochodzi z określonego urządzenia, czy nie.
Spunkie

2
Zgadzam się. Ale nie zgadzam się z celami „responsive design”. Jak powiedziałem, projektanci wymyślili, aby się pochwalić. Zapominają, że iPhone nigdy nie będzie miał dużej rozdzielczości. tl; dr - Elastyczne projektowanie nie ma znaczenia na urządzeniach mobilnych. Wolę oszczędzać przepustowość sieci niż mieć „czysty responsywny projekt”.
Don Gilbert

2
@DonGilbert i Spunkie - IMO - obaj macie rację. „Ścisła” definicja responsywnego projektowania stron internetowych nie obejmuje modyfikowania „treści”
zmienię

8

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.


1
To wygląda jak główny element układanki i ma ciekawe możliwości - dziękuję za odpowiedź, a zwłaszcza za opublikowanie kodu.
NivF007

1
Najważniejszą odpowiedzią jest mój współpracownik, to mniej więcej mój pomysł: P
Jordan Ramstad


3

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.


2

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.


2

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).


Dziękuję za odpowiedź. Problem z podejściem CSS do zapytań o media polega na tym, że nadal wykonujesz moduł (nawet jeśli zdecydujesz się go nie wyświetlać). Rozwiązanie, którego szukam, nie uruchomi modułu, dopóki nie zostanie wyświetlone.
NivF007

Jak powiedzieli inni, może to nie być najlepszy pomysł dla osób, które zmieniają rozmiar rzutni po załadowaniu strony, a także tablety w orientacji poziomej i pionowej. Kilka setnych sekundy, które zajmuje serwerowi, aby przeanalizować ten moduł, nie będzie miało większego znaczenia, a ponieważ jest wyświetlany: żaden z mniejszych urządzeń nie renderuje go, więc nie traci się czasu. - Ale jeśli naprawdę nie chcesz, aby ładował się, zaawansowany menedżer modułów jest prawdopodobnie najlepszym rozwiązaniem, jak opisano w innej odpowiedzi.
pathfinder

1

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.


Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.