ti-enxame.com

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 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 de um módulo estar oculto com base no tamanho da janela de exibiçã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 exibiçã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?

14
NivF007

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, não permite escolher por 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.

15
Faye

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.

10
Spunkie

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.

8
Jordan Ramstad

Outra solução:

Você pode usar uma detecção de dispositivo do lado do servidor como esta: http://mobiledetect.net/ aqui o plug-in Joomla http://www.yagendoo.com/en/blog/free- mobile-detection-plugin-for-joomla.html e depois 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.

3
Joomla Agency

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 de dispositivos maiores também desejam um site rápido que não carregue 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 usuários uma experiência otimizada no site, independentemente do tamanho da tela.

3
Seth Warburton

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 invólucro dessa posição (ou posições em alguns modelos).

2
pathfinder

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.

2
Jeepstone

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

1
Harald Leithner

Você pode usar o sufixo do módulo em combinação com consultas de mídia. Muitas estruturas de modelos já possuem isso, 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

0
YellowWebMonkey