如何根据Joomla 3中的设备或视口大小禁用模块以优化移动设备的性能？

我是自适应Web设计与自适应Web设计（即一种可调整所有设备的显示并根据视口大小提供内容的设计）相结合的支持者，而不是单独的“移动”网站设计。

有一些缺点，例如，在大型显示器上，我想包括一些对较小视口尺寸隐藏的模块。但是，在基于视口大小隐藏模块的情况下，当已知特定模块永远不会以较小的视口大小显示时，加载和执行该模块会导致不必要的性能下降。

如何使用视口大小有效地禁用模块（即，使其停止执行）以提高性能？

高级模块管理器（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');
    });

断点具有用于宽度的最小/最大参数，然后是用于输入和离开的链接函数，并带有运行一些JS代码的回调。

我不能像我很久以前那样详细介绍它的工作原理，但是如果有帮助，您可以自由使用它。这可用于基于视口通过ajax加载模块。我相信joomla的com_ajax可以与此结合使用，以制作一些非常酷的功能。

另一个解决方案：

您可以像这样使用服务器端设备检测：http : //mobiledetect.net/，此处是Joomla插件http://www.yagendoo.com/en/blog/free-mobile-detection-plugin-for-joomla.html然后使用您自己的mod_chrome样式扩展joomla / templates / yourtemplate / html / modules.php。然后，您可以为任何设备或分辨率编写任意数量的php if语句。

如果要提高性能，请不要加载不必要的模块。如果在小屏幕上不需要，那么在大屏幕上也不需要。

具有较大设备显示屏的人们还希望拥有一个不会加载不必要内容的快速网站。您错误地假设较大的屏幕具有更多可用带宽。他们没有。

成为一名优秀的设计师，无论您的屏幕大小如何，都为您的所有用户提供最佳的网站体验。

我建议浏览器嗅探是错误的方法。如果您确实只想根据屏幕宽度加载模块，则需要运行一些javascript，然后通过AJAX（com_ajax）调用该模块。请记住，针对由AJAX加载的内容进行搜索引擎优化可能会有所收获。

我通常使用css @media来实现这一目标。使您可以轻松地根据屏幕大小隐藏事物，并让它们在横向平板电脑足够宽以显示而纵向宽度没有的情况下进行解析。这是一个例子：

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

我通常使用它来隐藏整个模块位置，因此我将css选择器基于该位置的包装器（或某些模板中的位置）。

您可以使用一些调用com_ajax的JavaScript并按需加载它，并仅返回当前大小的模块。

您可以将模块后缀与媒体查询结合使用。许多模板框架都已内置此框架，您可以在其中添加一类“隐藏电话”以使其不显示在移动设备上。他们称它们为CSS Helper类：

龙门：http ://www.gantry-framework.org/documentation/joomla/advanced/sensitive_grid_system.md

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