javascript - Bagaimana untuk membuat paparan halaman web secara langsung dalam orientasi landskap pada telefon mudah alih?

Question

Halaman web direka untuk telefon mudah alih dengan skrin mendatar Jika halaman dipaparkan dalam skrin menegak, halaman itu akan menjadi kucar-kacir.

Answer 1

boleh menentukan dan kemudian menggesa pengguna untuk memutar

if(window.orientation==90||window.orientation==-90){
    alert("横屏状态！")
}

Atau dengar acara penggiliran

window.onorientationchange = function(){ 
    switch(window.orientation){ 
        case -90: 
        case 90: 
            alert("横屏:" + window.orientation);
        case 0: 
        case 180: 
             alert("竖屏:" + window.orientation);
        break; 
    } 
} 

pertanyaan media css juga boleh dinilai

@media (orientation: portrait) { } 横屏 @media (orientation: landscape) { }竖屏 

Tetapi masih ada penyelesaian:
Anda boleh menggunakan window.orientation untuk menentukan sama ada halaman web mendatar atau menegak apabila membuka halaman Jika ia menegak, tambah gaya pada keseluruhan halaman

.

transform: rotate(90deg);

Dengan cara ini, halaman anda akan memaparkan kesan skrin mendatar.

Answer 2

Hujung hadapan tidak boleh mengawal skrin mendatar dan menegak telefon bimbit, tetapi ia boleh dinilai melalui keadaan css:

Potret:

@media screen and (orientation:portrait){
    #wrap{
        display:none;
    }
}

Lanskap:

@media screen and (orientation:landscape){
    #wrap{
        display:block;
    }
}

Sebagai contoh, apabila skrin menegak, teks gesaan dipaparkan: Sila semak imbas secara mendatar.
Gunakan operasi css untuk menunjukkan dan menyembunyikan selepas skrin mendatar.