Comment forcer une application Web à s'exécuter en mode paysage ?

Comment appliquer le mode paysage dans les applications Web

Malgré la flexibilité inhérente des appareils mobiles pour s'adapter à diverses orientations, il peut être nécessaire de restreindre certaines applications à une orientation spécifique. Voici comment appliquer le mode « paysage » pour votre application.

1. Détection de l'orientation de l'appareil

Auparavant, il était impossible de verrouiller l'orientation des applications Web. Cependant, avec les requêtes multimédias CSS3, les développeurs peuvent détecter l'orientation de l'appareil et appliquer différents styles CSS en conséquence :

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

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

Ou, en utilisant JavaScript :

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

2. Manifeste de l'application Web HTML5

Depuis le 12 novembre 2014, le manifeste de l'application Web HTML5 fournit un moyen de forcer le mode d'orientation. Dans le fichier manifest.json, vous pouvez inclure les éléments suivants :

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

Ensuite, incluez le manifeste dans votre fichier HTML :

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

Notez que la prise en charge du verrouillage d'orientation du manifeste de l'application Web la fonctionnalité peut varier selon les navigateurs. Il a été confirmé que Chrome fournit cette fonctionnalité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!