Wymuś tryb orientacji „poziomej”

91

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

javascript device-orientation

— user1599537
źródło

93

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.

— Rémi Breton
źródło

1

Tak, aplikacje internetowe też. Nawet jeśli „zapiszesz” swoją witrynę na ekranie głównym iPhone'a lub iPada, aplikacja internetowa zmieni orientację.

— Rémi Breton,

2

Zgodnie z caniuse.com, manifesty mogą być używane od wersji Androida 4.1. Zobacz caniuse.com/#feat=offline-apps

— Rémi Breton

1

Jak mogę sprawdzić, czy manifest jest wywoływany? Nie działa dla mnie i nic nie pokazuje, że zostało załadowane do sieci moich narzędzi programistycznych, mimo że manifest znajduje się w tym samym miejscu, co plik index.html, do którego jest podłączony.

— Ian S

3

W przeglądarce Chrome możesz teraz sprawdzić kartę „Aplikacja” w trybie inspekcji. Jest tam strona „Manifest” z bezpośrednim linkiem do pliku json i informacjami o nim.

— drskullster

1

@ RémiBreton - czy nadal szukasz tych informacji, więc możesz je zaktualizować? Czekaliśmy cierpliwie od lat!

— ashleedawg

46

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

— Łom
źródło

3

Nie działa na Androidzie z domyślną przeglądarką internetową (nie chrome) - jakieś pomysły?

— Antonios Tsimourtos

6

Nie zaimplementowano w przeglądarce Safari (iOS i macOS): caniuse.com/#feat=screen-orientation

— MBach

3

Krótka uwaga, działa to tylko po wejściu w tryb pełnoekranowy.

— Thane Brimhall

2

Ta metoda jest odradzana przez Mozillę: developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation Ma również bardzo słabą kompatybilność z przeglądarkami

— Fernando Garcia

1

To nawet nie działa w trybie pełnoekranowym w chrome: |

— Shamshirsaz, Navid

23

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

— pomber
źródło

3

Skorzystałem z tej odpowiedzi ... wszystko, co muszę zrobić, to zmienić zapytanie o media z landscapena portraiti działa zgodnie z oczekiwaniami@media screen and (orientation: portrait)

— ymz

Zredagował odpowiedź, aby pomóc przyszłym ludziom. Obrót powinien być zastosowany, gdy aktualny tryb jest portrait(aby mógł się przełączyć landscape).

— lfarroco

Dzięki. Szukałem czegoś takiego.

— przegrany

Jak mogę zastosować to tylko na jednej stronie poprzez page-id-xxx?

— Homer

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!

— Miguel Montes de Oca
źródło