Wymuś tryb orientacji „poziomej”

Próbuję wymusić tryb „krajobrazu” dla mojej aplikacji, ponieważ moja aplikacja absolutnie nie jest przeznaczona do trybu „portretowego”. Jak mogę to zrobić?

Jest to teraz możliwe dzięki manifestowi aplikacji internetowej HTML5. Zobacz poniżej.

Oryginalna odpowiedź:

Nie można zablokować witryny internetowej ani aplikacji internetowej w określonej orientacji. Jest to sprzeczne z naturalnym zachowaniem urządzenia.

Możesz wykryć orientację urządzenia za pomocą zapytań o media CSS3, takich jak:

@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
}

Lub przez powiązanie zdarzenia zmiany orientacji JavaScript, takiego jak to:

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

Aktualizacja z 12 listopada 2014 r .: jest to teraz możliwe dzięki manifestowi aplikacji internetowej HTML5.

Jak wyjaśniono na html5rocks.com , możesz teraz wymusić tryb orientacji za pomocą manifest.jsonpliku.

Musisz dołączyć te linie do pliku json:

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

I musisz dołączyć manifest do pliku HTML w następujący sposób:

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

Nie do końca jestem pewien, jakie wsparcie znajduje się w manifeście aplikacji internetowej dla trybu orientacji blokowania, ale Chrome zdecydowanie tam jest. Zaktualizuję się, gdy będę mieć informacje.

screen.orientation.lock('landscape');

Zmusi go do zmiany i pozostania w trybie poziomym. Przetestowano na Nexusie 5.

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

Używam niektórych CSS w ten sposób (na podstawie sztuczek 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;
  }
}

Miałem ten sam problem, był to brakujący plik manifest.json, jeśli nie zostanie znaleziony, przeglądarka zdecyduje, że orientacja jest najlepsza, jeśli nie określisz pliku lub użyjesz złej ścieżki.

Naprawiłem tylko poprawne wywołanie manifest.json w nagłówkach html.

Moje nagłówki 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">

I zawartość pliku 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"
  }
}

Aby wygenerować ulubione ikony i ikony, użyj tego narzędzia internetowego: https://realfavicongenerator.net/

Aby wygenerować plik manifestu, użyj: https://tomitm.github.io/appmanifest/

Mój PWA działa świetnie, mam nadzieję, że pomoże!