Jak wyłączyć przełączanie krajobrazu/portretu w mobilnej aplikacji internetowej (przeglądarka systemu Android/iOS-Mobile Safari)

Próbuję wyłączyć obrót telefonu wpływający na stronę jednej z moich aplikacji mobilnych HTML5. Brak reorganizacji układu, zmiany rozmiaru, orientacji zachowania.Jak wyłączyć przełączanie krajobrazu/portretu w mobilnej aplikacji internetowej (przeglądarka systemu Android/iOS-Mobile Safari)

Chcę, aby telefon był obrócony, a początkowy układ załadunku pozostanie taki sam, zmuszając użytkownika do korzystania z aplikacji w oryginalnej orientacji. Jest wiele subtelności w logice użytkownika i naprawdę czuję, że jest to potrzebne w mojej aplikacji, więc nie komentuj tego wyboru, raczej pomóż mi w moim pytaniu w pierwszym zdaniu.

Próbowałem słuchać zarówno dla „orientationChange” i zdarzeń „” i zmiany rozmiaru wywołanie preventDefault i stopPropagation na nich, aby uniknąć zachowań przeglądarki reorganizacji strony, aby dopasować widok krajobrazu po włączeniu. Cóż, oczywiście uniemożliwiając WSZYSTKO (idealnie).
```
window.addEventListener("orientationchange", function (e) { 
e.preventDefault(); 
e.stopPropagation(); 
}, false); 

window.addEventListener("resize", function (e) { 
e.preventDefault(); 
e.stopPropagation(); 
}, false); 
```

Wykonane absolutnie żadnej różnicy. Przeglądarka nadal zreorganizowała stronę na Androida (zarówno pre2.1, jak i później) oraz iPhone'a 4-5.

próbował Metatagi

<meta name="viewport" content="initial-scale=1.0, user-scalable=no />

następnie został zalany, próbował

<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />

ani do zmian.

spojrzał z furią na StackOverflow, zobaczyłem, co zrobiłem w kroku 1. wypuściłem tam kilka razy ... spróbowałem jeszcze raz, aby upewnić się, że nic nie zepsuję. Nie działa.
wyssała moją dumę, a następnie zdecydowałam się wpaść w ceglaną ścianę z powodu dumy, a potem naprawdę wciągnęła moja duma i tutaj zamieściła.

HALP.

Źródło

2011-11-16 SPillai

Urządzenia mobilne zapewniają skalowanie i obracanie dla użytkowników ** **, a nie deweloperów. Dlaczego chcesz go usunąć? – RobG

@RobG Myślę, że jesteś zdezorientowany. – fancy

@RobG Przepraszam, że jestem szorstki, ale nie o to chodzi. – SPillai

-3

dodanie android: configChanges = "keyboardHidden | orientation" do twojego AndroidManifest.xml. Mówi to systemowi, jakie zmiany konfiguracji sobie poradzisz - w tym przypadku nie robiąc nic.

Źródło

2011-11-16 03:27:54 sanraj

aplikacja internetowa, a nie aplikacja natywna. w szczególności powinno istnieć rozwiązanie javascript, którego brakowało mi – SPillai

Nie można wyłączyć orientacji mobilnej w aplikacji internetowej. Możesz tylko obrócić stronę do portretu (używając obrotu css od JS), gdy zmieniają orientację na poziomy model. W ten sposób będą zmuszeni korzystać z aplikacji internetowej w trybie portretowym.

Można również pokazać im wiadomość („tylko tryb portret”, gdy próbują przeglądać w trybie poziomym)

Źródło

2012-05-28 14:29:59 Hasanavi

Zrobiłem to za pomocą następującego obejść, który pyta użytkownika, aby powrócić do trybu portretu.
Po przełączeniu użytkownika z powrotem w tryb portretowy, będzie on mógł wchodzić w interakcje z aplikacją.

<head> 
<style type="text/css"> 
#landscape{ 
     position: absolute; 
     top: 0px; 
     left: 0px; 
     background: #000000; 
     width: 100%; 
     height: 100%; 
     display: none; 
     z-index: 20000; 
     opacity: 0.9; 
     margin:0 auto; 
} 
#landscape div{ 

     color: #FFFFFF;         
     opacity: 1; 
     top: 50%; 
     position: absolute; 
     text-align: center; 
     display: inline-block; 
     width: 100%; 
} 
</style> 
<script>   
     function doOnOrientationChange() 
     { 
     switch(window.orientation) 
     { 
      case -90:     
       document.getElementById("landscape").style.display="block"; 
       break; 
      case 90:    
       document.getElementById("landscape").style.display="block";     
       break; 
     default:     
       document.getElementById("landscape").style.display="none"; 
       break;        
     } 
     } 

     //Listen to orientation change 
     window.addEventListener('orientationchange', doOnOrientationChange); 

    </script> 
</head> 
<body onload="doOnOrientationChange();"> 
<div id="landscape"><div>"Rotate Device to Portrait"</div></div> 
</body>

Źródło

2013-09-11 09:20:48 Anup

Myślę, że to całkiem eleganckie rozwiązanie. Po prostu moja opinia :) –

window.orientation nie jest wiarygodny. -90 ° może być portretem na niektórych urządzeniach. orientacja 0 jest po prostu _default_ orientacją urządzenia. – Pierre

Oczywistym rozwiązaniem jest użycie JavaScript do tego:

if(window.innerHeight > window.innerWidth){ 
    document.getElementsByTagName("body")[0].style.transform = "rotate(90deg)"; 
}

podczas obracania ekranu, obrócić z powrotem.

Źródło

2014-05-06 21:16:14 invot

Nie powinno to być 'if (window.innerHeight> window.innerWidth) { document.getElementsByTagName (" body ") [0] .style.transform =" obróć (90deg) "; } ' –

czy jesteś pewien, że to działa? – Martian2049

Naprawiono błąd @KunalDethe. Dzięki! – invot

Zachowaj krótki i prosty! :]

window.addEventListener('orientationchange', function() 
 
{ 
 
    if (window.innerHeight > window.innerWidth) 
 
    { 
 
     document.getElementsByTagName('body')[0].style.transform = "rotate(90deg)"; 
 
    } 
 
});

Źródło

2015-05-11 20:27:31 tfont

masz tam mały błąd, powinno to być document.getElementsByTagName ('body') [0] .style.transform = "rotate (90deg)"; – JackKalish

Masz rację! Dziękuję Ci. Kod został zaktualizowany. – tfont

Jak wyłączyć przełączanie krajobrazu/portretu w mobilnej aplikacji internetowej (przeglądarka systemu Android/iOS-Mobile Safari)

Odpowiedz

Powiązane problemy