javascript melumpuhkan skrin menegak

Dengan populariti telefon pintar dan tablet, semakin banyak tapak web mula mereka bentuk dan membangunkan versi mudah alih. Pada peranti mudah alih, tidak seperti komputer meja, pengguna boleh melaraskan orientasi peranti sesuka hati, iaitu skrin mendatar atau menegak, yang turut membawa masalah tertentu. Contohnya, apabila tapak web dipaparkan dalam mod potret, kandungan yang dipaparkan mungkin terlalu sempit dan sukar untuk dibaca dan dikendalikan. Apabila pengguna beralih kepada mod landskap, halaman mungkin berada di luar kedudukan atau tidak dapat dipaparkan kerana masalah reka letak. Oleh itu, sesetengah pembangun berharap untuk menambah fungsi melumpuhkan skrin menegak pada halaman web supaya halaman hanya boleh dipaparkan dalam mod landskap. Di sinilah JavaScript berguna.

1. Apakah itu JavaScript?

JavaScript ialah bahasa skrip yang digunakan terutamanya untuk membangunkan bahagian hadapan Internet, iaitu reka bentuk interaksi sisi pelayar. Dapat difahami bahawa HTML ialah struktur dan kandungan halaman, CSS ialah penampilan dan gaya halaman, dan JavaScript ialah fungsi dan kesan dinamik halaman. Melalui skrip yang ditulis dalam JavaScript, halaman boleh melaksanakan beberapa respons dan gelagat tertentu, seperti borang pengesahan, kotak timbul, imej karusel, dsb.

2. Bagaimana untuk melumpuhkan skrin menegak?

1. Gunakan gaya CSS

Cara mudah ialah menggunakan gaya CSS, yang boleh menetapkan lebar halaman kepada 100% ketinggian skrin, supaya ia hanya boleh diselesaikan dalam mod landskap Keseluruhan halaman dipaparkan secara menegak, tetapi keseluruhan kandungan tidak boleh dipaparkan apabila skrin menegak.

<style>
body{
    width:100vh;
    overflow-x:hidden;
}
</style>

Antaranya, unit vh mewakili 1% daripada ketinggian viewport Penyelesaian ini hanya sesuai untuk elemen kedudukan mutlak dan susun atur bendalir (Reka Letak Responsif). Walau bagaimanapun, kaedah ini sebenarnya tidak menghalang peranti daripada bertukar kepada mod potret, dan pengguna masih boleh menukar orientasi dengan memutar peranti.

2. Gunakan pertanyaan media

Kaedah lain ialah menggunakan peraturan pertanyaan media @media dalam CSS3. Anda boleh menetapkan syarat Apabila ketinggian peranti lebih kecil daripada lebar peranti, tambahkan gaya putaran untuk memutarkan kandungan secara automatik 90 darjah supaya halaman sentiasa dalam mod landskap. Dengan cara ini, tidak kira bagaimana pengguna memutar peranti, halaman akan sentiasa dipaparkan dalam mod landskap.

@media screen and (orientation: portrait){
    //竖屏模式下的CSS样式
    body{
        transform: rotate(90deg);
        transform-origin: right top; /*定位基点为屏幕右上角*/
        width:100vh;
        overflow-x:hidden;
        position:absolute;
        top:100%; /*将页面定位到屏幕底部*/
        left:0;
    }
}

Perlu diingatkan bahawa kaedah ini memerlukan semua kandungan diputar 90 darjah, termasuk teks, imej, butang, dll. Walaupun ini membolehkan halaman dipaparkan dalam mod landskap, penampilan dan pengalaman halaman akan sangat terjejas, dan ia juga akan menyebabkan banyak kesulitan semasa proses pembangunan dan penyelenggaraan.

3. Gunakan JavaScript

Selain daripada dua kaedah di atas, anda juga boleh menggunakan JavaScript untuk melumpuhkan skrin menegak Kaedah ini secara automatik boleh menentukan dan berputar berdasarkan orientasi peranti. Kodnya adalah seperti berikut:

<script>
window.onload=function(){
    var isMobile = !!navigator.userAgent.match(/AppleWebKit.*Mobile.*/);
    if(isMobile){
        var el = document.getElementsByTagName('body')[0];
        if(window.orientation == 90 || window.orientation == -90){
            el.style.display = 'none';
            alert('请将设备调回竖屏模式');
        }
        window.addEventListener("orientationchange", function() {
            if(window.orientation == 0 || window.orientation == 180){
                el.style.display = 'none';
                alert('请将设备调为横屏模式');
            }else{
                el.style.display = 'block';
            }
        }, false);
    }
};
</script>

Dengan menentukan orientasi peranti, apabila peranti berada dalam mod potret, halaman akan disembunyikan dan kotak gesaan akan muncul untuk menggesa pengguna menukar kembali ke mod landskap. Halaman dipaparkan semula apabila orientasi peranti ditukar kepada mod landskap.

Perlu diambil perhatian bahawa apabila menggunakan JavaScript untuk melumpuhkan skrin menegak, anda perlu mempertimbangkan peristiwa perubahan orientasi peranti Peristiwa orientationchange digunakan di sini. Di samping itu, memandangkan userAgent (ejen pengguna) peranti dan penyemak imbas yang berbeza mungkin berbeza, ujian dan penyesuaian yang mencukupi diperlukan untuk memastikan kestabilan dan keserasian kod.

3. Ringkasan

Sama ada anda menggunakan gaya CSS, pertanyaan media atau JavaScript, ia pada dasarnya adalah operasi dan pengubahsuaian gaya pada halaman untuk mencapai tujuan melarang skrin menegak. Walau bagaimanapun, perlu diingatkan bahawa melarang skrin menegak adalah agak kontroversi dengan sendirinya Sesetengah pengguna mungkin merasakan bahawa ini menyekat hak mereka untuk memutar peranti mereka secara bebas, yang boleh menimbulkan kesan buruk terhadap tapak web. Tetapi dalam apa jua keadaan, kita harus menghormati pilihan pengguna dan membuat halaman dengan pengalaman pengguna yang lebih baik.

Atas ialah kandungan terperinci javascript melumpuhkan skrin menegak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!