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

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

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

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

14 голосов | спросил NivF007 23 PMpWed, 23 Apr 2014 22:54:39 +040054Wednesday 2014, 22:54:39

9 ответов


15

Advanced Module Manager ( http://www.nonumber.nl/extensions/advancedmodulemanager ) позволяет вам назначать модули на основе ТИПА браузера. Таким образом, вы можете выбрать мобильный или рабочий стол или конкретное устройство. Тем не менее, вы не можете выбирать по размеру, поэтому это полезно только в определенной степени.

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

ответил Faye 23 PMpWed, 23 Apr 2014 23:07:17 +040007Wednesday 2014, 23:07:17
10

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

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

ответил Spunkie 23 PMpWed, 23 Apr 2014 23:00:21 +040000Wednesday 2014, 23:00:21
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');
    });

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

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

ответил Jordan Ramstad 23 PMpWed, 23 Apr 2014 23:47:21 +040047Wednesday 2014, 23:47:21
3

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

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

ответил Joomla Agency 14 Maypm14 2014, 19:59:03
3

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

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

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

ответил Seth Warburton 15 Maypm14 2014, 17:08:20
2

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

ответил Jeepstone 24 PMpThu, 24 Apr 2014 12:18:11 +040018Thursday 2014, 12:18:11
2

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

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

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

ответил pathfinder 25 PMpFri, 25 Apr 2014 22:59:52 +040059Friday 2014, 22:59:52
1

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

ответил Harald Leithner 23 PMpWed, 23 Apr 2014 23:05:10 +040005Wednesday 2014, 23:05:10
0

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

GANTRY: http://www.gantry-framework.org/документация /Joomla /расширенный /responsive_grid_system.md

WARP: http://www.yootheme.com/блог /2012/06/12 /деформации получают реагирующий

ответил YellowWebMonkey 20 J0000006Europe/Moscow 2014, 01:51:56

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132