Como um módulo pode ser desativado com base no tamanho do dispositivo ou da janela de visualização no Joomla 3 para otimizar o desempenho de dispositivos móveis?

Sou um defensor do Design Responsivo da Web em conjunto com o Adaptive Web Design (ou seja, um design que ajusta a exibição para todos os dispositivos e fornece conteúdo com base no tamanho da porta de exibição), em vez de separar os designs de sites 'móveis'.

Existem algumas desvantagens, por exemplo, em telas grandes, que eu gostaria de incluir alguns módulos que serão ocultados para tamanhos de viewport menores. No entanto, no caso em que um módulo está oculto com base no tamanho da janela de visualização, carregar e executar esse módulo causa um impacto desnecessário no desempenho quando se sabe que o módulo específico nunca será exibido em um tamanho de janela de visualização menor.

Como posso usar o tamanho da janela de exibição para desativar efetivamente um módulo (ou seja, impedi-lo de executar) para acelerar o desempenho?

O Advanced Module Manager ( http://www.nonumber.nl/extensions/advancedmodulemanager ) permite atribuir módulos com base no TYPE do navegador. Assim, você pode selecionar dispositivos móveis, computadores ou dispositivos específicos. No entanto, ele não permite que você escolha o tamanho, por isso é útil apenas até certo ponto.

Também pode ser possível com uma combinação de php e javascript. Vou enviar essa pergunta ao meu amigo, ele pode ter uma idéia.

Eu não acho que você deva desativar módulos como esse e ainda chamar de design responsivo. Parte do ponto de resposta é que ele responderá a alterações na janela de visualização e não apenas imprimirá um layout diferente para diferentes tamanhos de tela.

Dependendo dos tamanhos de tela de exemplo, é possível que um tablet no modo retrato faça com que o módulo não seja carregado, mas esse mesmo tablet poderá precisar desse conteúdo uma vez no modo paisagem.

Esta é uma classe JS que criei há algum tempo, que poderia usar o javascript para detectar viewports; nunca foi submetida a testes rigorosos, mas funciona.

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

Basicamente você usa assim

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

O ponto de interrupção possui parâmetros mín. / Máx. De largura e, em seguida, uma função encadeada para inseri-lo e sair, com um retorno de chamada para executar algum código JS.

Não posso entrar em detalhes sobre como funciona, como fiz há muito tempo, mas você pode usá-lo gratuitamente se isso ajudar. Isso pode ser usado para carregar módulos através do ajax com base na janela de visualização. Eu acredito que o com_ajax do joomla pode ser usado com isso para criar alguns recursos realmente interessantes.

Outra solução:

Você pode usar uma detecção de dispositivo do lado do servidor como esta: http://mobiledetect.net/ aqui o Joomla Plugin http://www.yagendoo.com/en/blog/free-mobile-detection-plugin-for-joomla.html e então estenda o joomla / templates / yourtemplate / html / modules.php com seu próprio estilo mod_chrome. Então você pode escrever quantas frases se quiser para qualquer dispositivo ou resolução.

Se você deseja acelerar o desempenho, não carregue módulos desnecessários. Se não for necessário em telas pequenas, também não será necessário em telas maiores.

Pessoas com telas maiores também querem um site rápido que não carrega lixo desnecessário. Você está assumindo erroneamente que telas maiores têm mais largura de banda disponível. Eles não.

Seja um bom designer e ofereça a todos os seus usuários uma experiência otimizada no site, independentemente do tamanho da tela.

Eu sugeriria que cheirar o navegador é o caminho errado para seguir aqui. Se você realmente deseja carregar apenas módulos com base na largura da tela, precisa estar executando algum javascript, que chama o módulo por AJAX (com_ajax). Lembre-se de que pode haver uma recompensa em termos de otimização do mecanismo de pesquisa para o conteúdo carregado pelo AJAX.

Eu geralmente uso css @media para fazer isso acontecer. Facilita a ocultação de objetos, dependendo do tamanho da tela, e a análise é feita em momentos em que uma mesa digitalizadora de paisagem é larga o suficiente para mostrá-la e a largura do retrato não. Aqui está um exemplo:

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

Eu costumo usar isso para ocultar uma posição inteira do módulo, para basear meu seletor de css no wrapper dessa posição (ou posições em alguns modelos).

Você pode carregá-lo sob demanda usando algum javascript que chama com_ajax e retorna apenas os módulos para o tamanho atual.

Você pode usar o sufixo do módulo em combinação com consultas de mídia. Muitas estruturas de modelos já possuem esse recurso, onde você pode adicionar uma classe de "telefone oculto" para não exibi-las no celular. Eles os chamam de classes 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