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


14

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

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

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

Ответы:


15

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

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


Какая хорошая идея, я никогда не думал об использовании AMM таким образом.
ДжекДжо

Питер вложил в AMM потрясающую функциональность, по моему мнению, это просто необходимо.
Фэй

Я согласен с этим. Если бы я застрял с темой, в которой это не было встроено (например, в темах Warp 7 это встроено), я бы использовал AMM.
Брайан Пит

@BrianPeat - можете ли вы предоставить дополнительную информацию о том, как это работает с WARP7?
NivF007

3
Warp 7 имеет панель в шаблоне администратора, которая позволяет нажимать кнопки для рабочего стола / планшета / телефона, а также включает и выключает модули на основе этих настроек. Тема Rocket делает нечто похожее со специальными классами. Что я не знаю, так это то, что модули выгружены или все загружено, а затем просто скрыто. Я подозреваю, что это последнее, так как вы можете увидеть, как оно меняется при изменении размера браузера. Если вы полностью разгрузите вещи в зависимости от размера, что они будут делать, если вы активно измените размер окна?
Брайан Пит

10

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

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


3
Хотя это правда, на практике это не очень эффективно. Это означает, что пользователь iPhone никогда не будет иметь разрешение экрана 1440x900, и при этом у него даже не будет возможности изменить размер своего окна просмотра. Адаптивный дизайн, в котором люди вроде «о, смотрите, как все меняется, когда я изменяю размер окна моего браузера», действительно эффективен только для дизайнеров, желающих похвастаться. На практике совершенно нормально подходить к отключению модулей и изменению выходного сигнала для разных размеров экрана.
Дон Гилберт

3
@ Дон: Извините, тогда это просто не адаптивный дизайн, и на рабочем столе много людей, которые используют возможности изменения размера при работе в Windows. Адаптивный дизайн реагирует на изменения области просмотра, независимо от того, является ли он определенным устройством или нет.
Spunkie

2
Я согласен. Но я не согласен с целями «адаптивного дизайна». Как я уже сказал, дизайнеры придумали, чтобы показать это. Они забывают тот факт, что у iPhone никогда не будет огромного разрешения. tl; dr - Адаптивный дизайн не имеет значения на мобильных устройствах. Я бы лучше сэкономил пропускную способность сети, чем имел бы «чистый адаптивный дизайн».
Дон Гилберт

2
@DonGilbert и в Spunkie - IMO - вы оба правы. «Строгое» определение адаптивного веб-дизайна не включает изменение «контента» - я отредактирую вопрос, включив в него RWD / AWD - адаптивный веб-дизайн и адаптивную веб-доставку en.wikipedia.org/wiki/Responsive_web_design
NivF007

8

Это класс 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 может быть использован для создания действительно классных функций.


1
Это похоже на большую часть головоломки и имеет интересные возможности - спасибо за ответ и особенно за размещение кода.
NivF007

1
Главный ответ - мой коллега, это более или менее моя идея: P
Джордан Рамстад

3

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

Вы можете использовать обнаружение устройства на стороне сервера следующим образом: 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 операторов, сколько вам нужно для любого устройства или разрешения.


3

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

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

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


2

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


2

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

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

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


Спасибо за Ваш ответ. Проблема с подходом CSS медиа-запроса состоит в том, что вы все еще выполняете модуль (даже если вы не хотите его отображать). Решение, которое я ищу, не выполнит модуль, если он не отображается.
NivF007

Как уже говорили другие, это может быть не самой лучшей идеей для людей, которые меняют размер окна просмотра после загрузки страницы, а также для планшетов с альбомной и альбомной ориентацией. Несколько сотых долей секунды, которые требуются серверу для разбора этого модуля, не будут иметь большого значения, и, поскольку он отображается: ни на меньших устройствах вы его не рендерите, поэтому и там не теряется время. - Но если вы действительно хотите, чтобы он не загружался, тогда Advanced Module Manager, вероятно, является тем способом, который описан в другом ответе.
Pathfinder

1

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


0

Вы можете использовать суффикс модуля в сочетании с медиа-запросами. У многих шаблонных фреймворков уже есть встроенная функция, в которую можно добавить класс «скрытого телефона», чтобы они не отображались на мобильном устройстве. Они называют их классами 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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.