Bagaimana Memaksa Apl Web Berjalan dalam Mod Landskap?

Cara Menguatkuasakan Mod Landskap dalam Aplikasi Web

Walaupun terdapat fleksibiliti yang wujud pada peranti mudah alih untuk menyesuaikan diri dengan pelbagai orientasi, ia mungkin perlu untuk mengehadkan aplikasi tertentu kepada orientasi tertentu. Begini cara anda boleh menguatkuasakan mod "landskap" untuk aplikasi anda.

1. Pengesanan Orientasi Peranti

Sebelum ini, adalah mustahil untuk mengunci orientasi aplikasi web. Walau bagaimanapun, dengan pertanyaan media CSS3, pembangun boleh mengesan orientasi peranti dan menggunakan gaya CSS yang berbeza dengan sewajarnya:

@media screen and (orientation:portrait) {
    /* Portrait mode styles */
}

@media screen and (orientation:landscape) {
    /* Landscape mode styles */
}

Atau, menggunakan JavaScript:

document.addEventListener("orientationchange", (e) => {
    if (window.orientation === 0 || window.orientation === 180) {
        /* Portrait mode */
    } else {
        /* Landscape mode */
    }
});

2. Manifes Aplikasi Web HTML5

Sehingga 12 November 2014, manifes aplikasi web HTML5 menyediakan cara untuk memaksa mod orientasi. Dalam fail manifest.json, anda boleh memasukkan perkara berikut:

{
    "display": "landscape",
    "orientation": "landscape",
    ...
}

Kemudian, masukkan manifes dalam fail HTML anda:

<link rel="manifest" href="manifest.json">

Perhatikan bahawa sokongan untuk kunci orientasi manifes webapp ciri mungkin berbeza-beza merentas pelayar. Chrome telah disahkan untuk menyediakan fungsi ini.

Atas ialah kandungan terperinci Bagaimana Memaksa Apl Web Berjalan dalam Mod Landskap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!