Forcer le mode d'orientation "paysage

Question

J'essaie de forcer le mode "paysage" pour mon application car mon application n'est absolument pas conçue pour le mode "portrait". Comment puis-je y parvenir ?

Answer 1

C'est désormais possible avec le manifeste de la webapp HTML5. Voir ci-dessous.

---

Réponse originale :

Vous ne pouvez pas verrouiller un site ou une application web dans une orientation spécifique. Cela va à l'encontre du comportement naturel de l'appareil.

Vous pouvez détecter l'orientation de l'appareil avec des requêtes média CSS3 comme ceci :

@media screen and (orientation:portrait) {
    // CSS applied when the device is in portrait mode
}

@media screen and (orientation:landscape) {
    // CSS applied when the device is in landscape mode
}

Ou en liant un événement JavaScript de changement d'orientation comme ceci :

document.addEventListener("orientationchange", function(event){
    switch(window.orientation) 
    {  
        case -90: case 90:
            /* Device is in landscape mode */
            break; 
        default:
            /* Device is in portrait mode */
    }
});

---

Mise à jour du 12 novembre 2014 : C'est désormais possible avec le manifeste de la webapp HTML5.

Comme expliqué sur html5rocks.com vous pouvez désormais forcer le mode d'orientation à l'aide d'un bouton manifest.json archivo.

Vous devez inclure ces lignes dans le fichier json :

{
    "display":      "standalone", /* Could be "fullscreen", "standalone", "minimal-ui", or "browser" */
    "orientation":  "landscape", /* Could be "landscape" or "portrait" */
    ...
}

Et vous devez inclure le manifeste dans votre fichier html comme ceci :

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

Je ne sais pas exactement quel est le support du manifeste de la webapp pour le verrouillage du mode d'orientation, mais Chrome est bel et bien présent. Je mettrai à jour quand j'aurai l'information.

Answer 2

screen.orientation.lock('landscape');

Cela le forcera à passer et à rester en mode paysage. Testé sur Nexus 5.

http://www.w3.org/TR/screen-orientation/#examples

Answer 3

J'utilise du css comme ceci (basé sur astuces css ) :

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

Answer 4

J'ai eu le même problème, c'était un fichier manifest.json manquant, s'il n'est pas trouvé, le navigateur décide de l'orientation la mieux adaptée, si vous ne spécifiez pas le fichier ou utilisez un mauvais chemin.

J'ai corrigé le fait d'appeler correctement le manifest.json sur les en-têtes html.

Mes en-têtes html :

<meta name="application-name" content="App Name">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="manifest" href="manifest.json">
<meta name="msapplication-starturl" content="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#">
<meta name="msapplication-TileColor" content="#">
<meta name="msapplication-config" content="browserconfig.xml">
<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#ffffff">
<link rel="shortcut icon" href="favicon.ico">

Et le contenu du fichier manifest.json :

{
  "display": "standalone",
  "orientation": "portrait",
  "start_url": "/",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "icons": [
  {
    "src": "android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }
}

Pour générer vos favicons et icônes, utilisez cet outil web : https://realfavicongenerator.net/

Pour générer votre fichier manifeste, utilisez : https://tomitm.github.io/appmanifest/

Ma PWA fonctionne très bien, j'espère que cela vous aidera !