it-swarm-tr.com

Bir modül, mobil cihazlar için performansı optimize etmek üzere Joomla 3'teki cihaza veya görüntü alanı boyutuna göre nasıl devre dışı bırakılabilir?

Uyarlanabilir Web Tasarımı ile birlikte Duyarlı Web Tasarımının savunucusuyum (diğer bir deyişle, "mobil" site tasarımlarının aksine, tüm cihazlar için ekranı ayarlayan ve görünüm bağlantı noktası boyutuna göre içerik sağlayan bir tasarım).

Bazı büyük dezavantajlar var, örneğin büyük ekranlarda daha küçük görüntü alanı boyutları için gizlenecek bazı modüller eklemek istiyorum. Ancak, bir modülün görüntü alanı boyutuna göre gizlenmesi durumunda, bu modülün yüklenmesi ve yürütülmesi gereksiz bir performans isabetine neden olur belirli modülün hiçbir zaman daha küçük bir görüntü alanı boyutunda görüntülenmeyeceği bilindiğinde.

Performansı hızlandırmak için bir modülü etkin bir şekilde devre dışı bırakmak (yani çalışmasını durdurmak) için görüntü alanı boyutunu nasıl kullanabilirim?

14
NivF007

Gelişmiş Modül Yöneticisi ( http://www.nonumber.nl/extensions/advancedmodulemanager ) tarayıcı TÜRÜ'ne göre modüller atamanıza olanak tanır. Böylece mobil veya masaüstü veya belirli bir cihazı seçebilirsiniz. Bununla birlikte, boyuta göre seçim yapmanıza izin vermez, bu nedenle sadece bir derece için yararlıdır.

Bir php ve javascript kombinasyonu ile de mümkün olabilir. Bu soruyu arkadaşıma göndereceğim, bir fikri olabilir.

15
Faye

Böyle modülleri devre dışı bırakmanız gerektiğini düşünmüyorum ve yine de duyarlı tasarım diyoruz. Duyarlı olan noktalardan biri, yalnızca farklı ekran boyutları için farklı bir düzen yazdırması değil, görünüm alanı değişikliklerine yanıt vermesidir.

Örnek ekran boyutlarına bağlı olarak, portre modundaki bir tabletin modülün yüklenmemesine neden olması mümkündür, ancak aynı tabletin yatay modda bir kez bu içeriğe ihtiyacı olabilir.

10
Spunkie

Bu, bir süre önce görünüm pencerelerini algılamak için javascript kullanabileceğiniz bir JS sınıfıdır, titiz testlerden geçirilmemiştir, ancak çalışır.

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

Temelde böyle kullanırsın

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

Kesme noktası, genişlik için min/maks parametrelerine sahiptir, daha sonra onu girmek ve ayrılmak için zincirlenmiş bir işleve sahiptir, bazı JS kodlarını çalıştırmak için bir geri çağrı vardır.

Çok uzun zaman önce yaptığım gibi, nasıl çalıştığına dair ayrıntılı bir şekilde ilerleyemem, ancak yardımcı olursa ücretsiz olarak kullanabilirsiniz. Bu, görünüm penceresine göre ajax aracılığıyla modülleri yüklemek için kullanılabilir. Joomla com_ajax bu gerçekten bazı harika özellikler yapmak için kullanılabilir inanıyoruz.

8
Jordan Ramstad

Başka bir çözüm:

Bunun gibi bir Sunucu Tarafı Aygıt algılaması kullanabilirsiniz: http://mobiledetect.net/ burada Joomla Eklentisi http://www.yagendoo.com/en/blog/free- mobile-algılama-eklentisi için-joomla.html ve sonra joomla/templates/şablonunuzu/html/modules.php dosyasını kendi mod_chrome stilinizle genişletin. Sonra herhangi bir cihaz veya çözünürlük için istediğiniz kadar php if ifadeleri yazabilirsiniz.

3
Joomla Agency

Performansı hızlandırmak istiyorsanız, gereksiz modülleri yüklemeyin. Küçük ekranlarda gerekli değilse, daha büyük ekranlarda da gerekli değildir.

Daha büyük cihaz ekranlarına sahip kişiler de gereksiz sarsıntı yüklemeyen hızlı bir web sitesi istiyor. Daha büyük ekranların daha fazla bant genişliğine sahip olduğu yanlış varsayımını yapıyorsunuz. Yapmazlar.

İyi bir tasarımcı olun ve ekran boyutlarından bağımsız olarak tüm kullanıcılarınıza optimize edilmiş bir site deneyimi yaşatın.

3
Seth Warburton

Bunu yapmak için genellikle css @media kullanıyorum. Ekran boyutuna bağlı olarak şeyleri gizlemeyi ve bir yatay tabletin gösterecek kadar geniş olduğu ve portre genişliğinin olmadığı zamanları ayrıştırmasını kolaylaştırır. İşte bir örnek:

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

Genellikle tüm modül konumunu gizlemek için kullanıyorum, böylece css seçicimi bu konumun sarıcısına (veya bazı şablonlardaki konumlara) dayandırıyorum.

2
pathfinder

Tarayıcı koklamanın buraya gitmenin yanlış yolu olduğunu öneririm. Modülleri yalnızca ekran genişliğine göre yüklemek istiyorsanız, modülü AJAX (com_ajax) olarak çağıran bazı javascript çalıştırmanız gerekir. AJAX tarafından yüklenen içerik için arama motoru optimizasyonu açısından.

2
Jeepstone

Com_ajax'ı çağıran ve yalnızca geçerli boyut için modülleri döndüren bazı javascript kullanarak istek üzerine yükleyebilirsiniz.

1
Harald Leithner

Modül sonekini medya sorgularıyla birlikte kullanabilirsiniz. Birçok şablon çerçevesi, cep telefonunda görüntülenmemeleri için bir "gizli telefon" sınıfı ekleyebileceğiniz yerleşik bir yapıya sahiptir. Onlara CSS Yardımcı sınıfları diyorlar:

GANTRY: http://www.gantry-framework.org/documentation/joomla/advanced/responsive_grid_system.md

ÇÖZGÜ: http://www.yootheme.com/blog/2012/06/12/warp-gets-responsive

0
YellowWebMonkey