¿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 según el 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 más pequeño.

¿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?

Advanced Module Manager ( http://www.nonumber.nl/extensions/advancedmodulemanager ) le permite asignar módulos según el 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.

No creo que deba deshabilitar módulos como ese y aún así 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.

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 ingresar 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 com_ajax de joomla se puede usar con esto para crear algunas funciones realmente geniales.

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.

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 quieren 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 de su tamaño de pantalla.

Sugeriría que el rastreo del navegador es la forma incorrecta de hacerlo 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.

Generalmente uso css @media para que esto suceda. Simplifica la ocultación de elementos según el tamaño de la pantalla y hace 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).

Puede cargarlo a pedido utilizando algunos javascript que llaman a com_ajax y devuelve solo los módulos para el tamaño actual.

Puede usar el sufijo del módulo en combinación con consultas de medios. Muchos marcos de plantillas tienen esto ya 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