it-swarm-id.com

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 (mis. - 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 hit performa yang tidak perl 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 (mis. Menghentikannya dari mengeksekusi) untuk mempercepat kinerja?

14
NivF007

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.

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

15
Faye

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.

10
Spunkie

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 buat 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.

8
Jordan Ramstad

Solusi lain:

Anda dapat menggunakan deteksi Perangkat Sisi Server seperti ini: http://mobiledetect.net/ di sini Plugin Joomla http://www.yagendoo.com/en/blog/free- mobile-detection-plugin-for-joomla.html dan kemudian perluas 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.

3
Joomla Agency

Jika Anda ingin mempercepat kinerja maka jangan memuat modul yang tidak perlu. Jika tidak perlu di layar kecil maka 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 keliru bahwa layar yang lebih besar memiliki lebih banyak bandwidth yang tersedia. Mereka tidak melakukannya.

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

3
Seth Warburton

Saya biasanya menggunakan css @ media untuk mewujudkan hal ini. Membuatnya mudah untuk menyembunyikan sesuatu 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 di beberapa template).

2
pathfinder

Saya menyarankan bahwa mengendus browser adalah cara yang salah untuk pergi di sini. Jika Anda benar-benar ingin hanya memuat modul berdasarkan lebar layar, Anda perlu 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.

2
Jeepstone

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

1
Harald Leithner

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

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

0
YellowWebMonkey