Как можно отключить модуль на основе размера устройства или области просмотра в Joomla 3, чтобы оптимизировать производительность для мобильных устройств?

Я сторонник адаптивного веб-дизайна в сочетании с адаптивным веб-дизайном (т. Е. Одним дизайном, который настраивает отображение для всех устройств и предоставляет контент на основе размера порта представления), а не отдельными «мобильными» сайтами.

Есть некоторые недостатки, например, на больших дисплеях, я хотел бы включить некоторые модули, которые будут скрыты для меньших размеров области просмотра. Однако в случае, когда модуль скрыт на основе размера области просмотра, загрузка и выполнение этого модуля вызывает ненужное снижение производительности, когда известно, что конкретный модуль никогда не будет отображаться с меньшим размером области просмотра.

Как я могу использовать размер области просмотра, чтобы эффективно отключить модуль (т.е. остановить его выполнение), чтобы повысить производительность?

Расширенный диспетчер модулей ( http://www.nonumber.nl/extensions/advancedmodulemanager ) позволяет назначать модули на основе браузера TYPE. Таким образом, вы можете выбрать мобильное или настольное, или конкретное устройство. Однако он не позволяет выбирать по размеру, поэтому он полезен только в определенной степени.

Это также может быть возможно с комбинацией php и javascript. Я отправлю этот вопрос своему приятелю, у него может быть идея.

Я не думаю, что вы должны отключать подобные модули и все же называть это адаптивным дизайном. Отчасти отзывчивость заключается в том, что он будет реагировать на изменения области просмотра, а не только на то, что печатает другой макет для разных размеров экрана.

В зависимости от размеров экрана примера, возможно, что планшет в портретном режиме приведет к тому, что модуль не будет загружаться, но тогда этот же планшет может нуждаться в этом контенте один раз в альбомном режиме.

Это класс JS, который я создал некоторое время назад и который мог использовать javascript для обнаружения окон просмотра, он никогда не подвергался тщательному тестированию, но работает.

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

В основном вы используете это так

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

Точка останова имеет параметры min / max для ширины, затем цепочку функций для ее ввода и выхода, с обратным вызовом для запуска некоторого кода JS.

Я не могу вдаваться в подробности о том, как это работает, поскольку я сделал это так давно, но вы можете использовать его, если это поможет. Это может быть использовано для загрузки модулей через ajax на основе области просмотра. Я считаю, что com_ajax от Joomla может быть использован для создания действительно классных функций.

Другое решение:

Вы можете использовать обнаружение устройства на стороне сервера следующим образом: http://mobiledetect.net/ здесь плагин Joomla http://www.yagendoo.com/en/blog/free-mobile-detection-plugin-for-joomla.html а затем дополните joomla / templates / yourtemplate / html / modules.php вашим собственным стилем mod_chrome. Затем вы можете написать столько php if операторов, сколько вам нужно для любого устройства или разрешения.

Если вы хотите повысить производительность, не загружайте ненужные модули. Если это не нужно на маленьких экранах, то это также не нужно на больших экранах.

Люди с большими дисплеями устройств также хотят иметь быстрый веб-сайт, который не загружает ненужную ненужную информацию. Вы делаете ошибочное предположение, что большие экраны имеют большую пропускную способность. Они не

Будьте хорошим дизайнером и предоставьте всем своим пользователям оптимизированный интерфейс, независимо от их размера экрана.

Я бы предположил, что перехват браузера - неправильный путь. Если вы действительно хотите загружать модули только на основе ширины экрана, вам нужно запустить какой-то javascript, который затем вызывает модуль с помощью AJAX (com_ajax). Имейте в виду, что с точки зрения оптимизации поисковых систем для контента, загружаемого AJAX, может быть выгодно.

Я обычно использую css @media, чтобы это произошло. Упрощает скрытие объектов в зависимости от размера экрана и позволяет анализировать их в тех случаях, когда альбомная ориентация планшета достаточно широка, чтобы показать его, а ширина портрета - нет. Вот пример:

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

Я обычно использую это, чтобы скрыть всю позицию модуля, поэтому я основываю свой css-селектор на оболочке этой позиции (или позиций в некоторых шаблонах).

Вы можете загрузить его по требованию, используя некоторый javascript, который вызывает com_ajax и возвращает только модули для текущего размера.

Вы можете использовать суффикс модуля в сочетании с медиа-запросами. У многих шаблонных фреймворков уже есть встроенная функция, в которую можно добавить класс «скрытого телефона», чтобы они не отображались на мобильном устройстве. Они называют их классами CSS Helper:

ГАНТРИ: http://www.gantry-framework.org/documentation/joomla/advanced/responsive_grid_system.md

WARP: http://www.yootheme.com/blog/2012/06/12/warp-gets-responsive