Bagaimana modul dapat dinonaktifkan berdasarkan ukuran perangkat atau viewport di Joomla 3 untuk mengoptimalkan kinerja perangkat seluler?

Saya seorang pendukung Desain Web Responsif dalam hubungannya dengan Desain Web Adaptif (yaitu - satu desain yang menyesuaikan tampilan untuk semua perangkat dan menyediakan konten berdasarkan ukuran port tampilan) yang bertentangan dengan desain situs 'seluler' yang terpisah.

Ada beberapa kelemahan, misalnya, pada tampilan besar saya ingin memasukkan beberapa modul yang akan disembunyikan untuk ukuran viewport yang lebih kecil. Namun, dalam kasus di mana modul disembunyikan berdasarkan ukuran viewport, memuat dan mengeksekusi modul itu menyebabkan kinerja yang tidak perlu ketika diketahui bahwa modul tertentu tidak akan pernah ditampilkan pada ukuran viewport yang lebih kecil.

Bagaimana saya bisa menggunakan ukuran viewport untuk secara efektif menonaktifkan modul (yaitu menghentikannya dari mengeksekusi) untuk mempercepat kinerja?

Advanced Module Manager ( http://www.nonumber.nl/extensions/advancedmodulemanager ) memungkinkan Anda untuk menetapkan modul berdasarkan TYPE browser. Jadi Anda dapat memilih ponsel, atau desktop, atau perangkat tertentu. Namun, ini tidak memungkinkan Anda untuk memilih berdasarkan ukuran, jadi hanya berguna pada tingkat tertentu.

Mungkin juga dengan kombinasi php dan javascript. Saya akan mengirimkan pertanyaan ini ke teman saya, dia mungkin punya ide.

Saya tidak berpikir Anda harus menonaktifkan modul seperti itu dan masih menyebutnya desain responsif. Bagian dari titik dengan responsif adalah bahwa ia akan menanggapi perubahan viewport dan tidak hanya mencetak tata letak yang berbeda untuk ukuran layar yang berbeda.

Bergantung pada ukuran layar contoh itu mungkin bahwa tablet dalam mode potret akan menyebabkan modul tidak memuat tetapi kemudian tablet yang sama mungkin membutuhkan konten itu sekali dalam mode lansekap.

Ini adalah kelas JS yang saya buat beberapa waktu lalu yang bisa menggunakan javascript untuk mendeteksi viewports, belum pernah melalui pengujian yang ketat tetapi berfungsi.

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

Pada dasarnya Anda menggunakannya seperti ini

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

Breakpoint memiliki parameter min / max untuk lebar, kemudian fungsi berantai untuk memasukkannya dan pergi, dengan panggilan balik untuk menjalankan beberapa kode JS.

Saya tidak bisa menjelaskan secara terperinci bagaimana cara kerjanya, seperti yang saya lakukan dulu tapi Anda bebas menggunakannya jika itu akan membantu. Ini dapat digunakan untuk memuat modul melalui ajax berdasarkan pada viewport. Saya percaya com_ajax joomla dapat digunakan dengan ini untuk membuat beberapa fitur yang sangat keren.

Solusi lain:

Anda dapat menggunakan deteksi Perangkat Sisi Server seperti ini: http://mobiledetect.net/ di sini Plugin Joomla http://www.yagendoo.com/id/blog/free-mobile-detection-plugin-for-joomla.html dan kemudian rentangkan joomla / templates / yourtemplate / html / modules.php dengan gaya mod_chrome Anda sendiri. Kemudian Anda dapat menulis banyak php jika pernyataan yang Anda suka untuk perangkat atau resolusi apa pun.

Jika Anda ingin mempercepat kinerja maka jangan memuat modul yang tidak perlu. Jika tidak perlu di layar kecil maka itu juga tidak perlu di layar yang lebih besar.

Orang dengan tampilan perangkat yang lebih besar juga menginginkan situs web cepat yang tidak memuat cruft yang tidak perlu. Anda membuat asumsi yang salah bahwa layar yang lebih besar memiliki bandwidth lebih banyak tersedia. Mereka tidak melakukannya.

Jadilah perancang yang baik dan berikan semua pengguna Anda pengalaman situs yang dioptimalkan, terlepas dari ukuran layar mereka.

Saya menyarankan bahwa mengendus browser adalah cara yang salah untuk pergi di sini. Jika Anda hanya ingin memuat modul berdasarkan lebar layar, Anda harus menjalankan beberapa javascript, yang kemudian memanggil modul dengan AJAX (com_ajax). Ingatlah bahwa mungkin ada hasil dalam hal optimasi mesin pencari untuk konten yang dimuat oleh AJAX.

Saya biasanya menggunakan css @ media untuk mewujudkan hal ini. Membuatnya mudah untuk menyembunyikan hal-hal tergantung pada ukuran layar dan membuatnya parse untuk saat-saat ketika tablet lanskap cukup lebar untuk menunjukkannya dan lebar potret tidak. Berikut ini sebuah contoh:

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

Saya biasanya menggunakan ini untuk menyembunyikan seluruh posisi modul jadi saya mendasarkan pemilih css saya pada pembungkus posisi itu (atau posisi dalam beberapa template).

Anda dapat memuatnya berdasarkan permintaan menggunakan beberapa javascript yang memanggil com_ajax dan hanya mengembalikan modul untuk ukuran saat ini.

Anda dapat menggunakan akhiran modul dalam kombinasi dengan pertanyaan media. Banyak kerangka kerja kerangka memiliki ini sudah built-in di mana Anda dapat menambahkan kelas "telepon tersembunyi" agar tidak ditampilkan di ponsel. Mereka menyebutnya kelas Bantuan CSS:

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

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