it-swarm-es.tech

¿Cómo se puede deshabilitar un módulo en función del tamaño del dispositivo o de la ventana gráfica en Joomla 3 para optimizar el rendimiento de los dispositivos móviles?

Soy un defensor del diseño web receptivo junto con el diseño web adaptativo (es decir, un diseño que ajusta la pantalla para todos los dispositivos y proporciona contenido en función del tamaño del puerto de visualización) en lugar de diseños de sitios 'móviles' separados.

Hay algunos inconvenientes, por ejemplo, en pantallas grandes, me gustaría incluir algunos módulos que estarán ocultos para tamaños de ventana más pequeños. Sin embargo, en el caso de que un módulo esté oculto en función del tamaño de la ventana gráfica, cargar y ejecutar ese módulo provoca un impacto innecesario en el rendimiento cuando se sabe que el módulo específico nunca se mostrará en un tamaño de ventana gráfica menor.

¿Cómo puedo usar el tamaño de la ventana gráfica para deshabilitar efectivamente un módulo (es decir, evitar que se ejecute) para acelerar el rendimiento?

14
NivF007

Advanced Module Manager ( http://www.nonumber.nl/extensions/advancedmodulemanager ) le permite asignar módulos en función del TIPO de navegador. Por lo tanto, puede seleccionar un dispositivo móvil, de escritorio o específico. Sin embargo, no le permite elegir por tamaño, por lo que solo es útil hasta cierto punto.

También puede ser posible con una combinación de php y javascript. Le enviaré esta pregunta a mi amigo, él podría tener una idea.

15
Faye

No creo que deba deshabilitar módulos como ese y todavía llamarlo diseño receptivo. Parte del punto con responsive es que responderá a los cambios de viewport y no solo que imprime un diseño diferente para diferentes tamaños de pantalla.

Dependiendo de los tamaños de pantalla de ejemplo, es posible que una tableta en modo vertical haga que el módulo no se cargue, pero esa misma tableta podría necesitar ese contenido una vez en modo horizontal.

10
Spunkie

Esta es una clase JS que hice hace algún tiempo que podría usar JavaScript para detectar ventanas gráficas, nunca se ha sometido a pruebas rigurosas, pero 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;
}

Básicamente lo usas así

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

El punto de interrupción tiene parámetros mínimos/máximos para el ancho, luego una función encadenada para ingresarlo y salir, con una devolución de llamada para ejecutar algún código JS.

No puedo detallar cómo funciona, ya que lo hice hace mucho tiempo, pero puedes usarlo si es útil. Esto se puede usar para cargar módulos a través de ajax en función de la ventana gráfica. Creo que el com_ajax de joomla se puede usar con esto para crear algunas funciones realmente geniales.

8
Jordan Ramstad

Otra solución:

Puede utilizar una detección de dispositivo del lado del servidor como esta: http://mobiledetect.net/ aquí el complemento de Joomla http://www.yagendoo.com/en/blog/free- mobile-detection-plugin-for-joomla.html y luego extienda joomla/templates/yourtemplate/html/modules.php con su propio estilo mod_chrome. Luego puede escribir tantas declaraciones php si desea para cualquier dispositivo o resolución.

3
Joomla Agency

Si desea acelerar el rendimiento, no cargue módulos innecesarios. Si no es necesario en pantallas pequeñas, tampoco es necesario en pantallas más grandes.

Las personas con pantallas de dispositivos más grandes también desean un sitio web rápido que no cargue elementos innecesarios. Está asumiendo erróneamente que las pantallas más grandes tienen más ancho de banda disponible. Ellos no.

Sea un buen diseñador y brinde a todos sus usuarios una experiencia de sitio optimizada, independientemente del tamaño de su pantalla.

3
Seth Warburton

Generalmente uso css @media para que esto suceda. Simplifica la ocultación de elementos según el tamaño de la pantalla y permite que se analicen cuando la tableta horizontal es lo suficientemente ancha como para mostrarla y el ancho del retrato no lo es. Aquí hay un ejemplo:

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

Usualmente uso esto para ocultar una posición completa del módulo, así que baso mi selector css en el contenedor de esa posición (o posiciones en algunas plantillas).

2
pathfinder

Sugeriría que el rastreo del navegador es la forma incorrecta de ir aquí. Si realmente desea cargar solo módulos en función del ancho de la pantalla, debe ejecutar javascript, que luego llama al módulo por AJAX (com_ajax)). Tenga en cuenta que puede haber una recompensa en términos de optimización de motores de búsqueda para contenido cargado por AJAX.

2
Jeepstone

Puede cargarlo a pedido usando un javascript que llama a com_ajax y devuelve solo los módulos para el tamaño actual.

1
Harald Leithner

Puede usar el sufijo del módulo en combinación con consultas de medios. Muchos marcos de plantillas ya tienen esto incorporado, donde puede agregar una clase de "teléfono oculto" para que no se muestren en el móvil. Los llaman clases 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