Wykryj orientację rzutni, jeśli orientacja to Portret wyświetla komunikat ostrzegawczy informujący użytkownika o instrukcjach


195

Tworzę stronę internetową specjalnie dla urządzeń mobilnych. W szczególności jest jedna strona, którą najlepiej oglądać w trybie poziomym.

Czy istnieje sposób na wykrycie, czy użytkownik odwiedzający tę stronę przegląda ją w trybie pionowym, a jeśli tak, wyświetl komunikat informujący użytkownika, że ​​stronę najlepiej oglądać w trybie poziomym? Jeśli użytkownik przegląda go już w trybie poziomym, nie pojawi się żaden komunikat.

Więc w zasadzie, chcę miejscem do wykrywania orientacji rzutni, jeśli jest orientacja pionowa , a następnie wyświetla komunikat alertu informując użytkownika, że ta strona jest najlepiej oglądać w Krajobrazowego trybie.

Odpowiedzi:


274
if(window.innerHeight > window.innerWidth){
    alert("Please use Landscape!");
}

jQuery Mobile ma zdarzenie, które obsługuje zmianę tej właściwości ... jeśli chcesz ostrzec, jeśli ktoś zmieni się później - orientationchange

Ponadto, po pewnym googlowaniu, sprawdź window.orientation(co, jak sądzę, mierzone w stopniach ...)


6
Nie, niestety nie. Jednak działał następujący skrypt: if (window.innerHeight> window.innerWidth) {alert („Proszę przeglądać w układzie poziomym”); }
Dan

8
Zbyt skomplikowałem problem. To jest świetne. Tak prosty.

76
Na wielu urządzeniach, gdy pokazana jest klawiatura, dostępna szerokość będzie większa niż wysokość, niepoprawnie dając orientację poziomą.
Pierre

1
Nie działa to w połączeniu z orientationchangewydarzeniem. Pokaże starą orientację zamiast nowej orientacji. Ta odpowiedź działa dobrze w połączeniu z orientationchangewydarzeniem.
Kaczor Donald


163

Możesz także użyć tego window.matchMedia, którego używam i preferuję, ponieważ bardzo przypomina składnię CSS:

if (window.matchMedia("(orientation: portrait)").matches) {
   // you're in PORTRAIT mode
}

if (window.matchMedia("(orientation: landscape)").matches) {
   // you're in LANDSCAPE mode
}

Testowany na iPadzie 2.


3
Pomoc dla tej funkcji jest dosyć słaby choć: caniuse.com/#feat=matchmedia
Ashitaka

2
W przeglądarce Firefox dla Androida działa poprawnie tylko po zdarzeniu DOM ready dla mnie.
Inwersja

13
Wsparcie dla tego jest teraz znacznie silniejsze. Wydaje się, że jest to teraz bardziej solidna odpowiedź niż zaakceptowana.
JonK

2
Strzeż się tego dzięki temu (
linkowemu

2
To jest poprawna odpowiedź teraz. Ta funkcja ma pełne wsparcie dla wszystkich odpowiednich przeglądarek.
Telarian

97

David Walsh ma lepsze podejście do sprawy.

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
  // Announce the new orientation number
  alert(window.orientation);
}, false);

Podczas tych zmian właściwość window.orientation może ulec zmianie. Wartość 0 oznacza widok pionowy, -90 oznacza, że ​​urządzenie jest obrócone poziomo w prawo, a 90 oznacza, że ​​urządzenie jest obrócone poziomo w lewo.

http://davidwalsh.name/orientation-change


2
Na Nexusie 10 i nie wiem o innych tabletach z Androidem 10 ", wartości są odwrócone. Tj. 0 jest zwracane, gdy urządzenie jest ustawione poziomo, a nie pionowo. Powyższa odpowiedź tobyodavies wydaje się działać dobrze, chociaż na wszystkich urządzeniach I" Testowaliśmy
Nathan

8
Orientacja 0 jest określana jako „naturalna” orientacja urządzenia, a zatem zależy od dostawcy. Może to być portret lub krajobraz ...
Pierre

na iPadzie w iframe niczego nie zaalarmował
Darius.V

2
nie jest to dobre rozwiązanie dla mod orientacji detekcji urządzenia. Ponieważ zwracane wartości zależą od naturalnej orientacji urządzenia. Przykład na tablecie Samsung 7 'widok pionowy zwraca 90, ale na Nexusie 4 dla portretu
Dexter_ns88

3
Pod tym linkiem: notes.matthewgifford.com/ ... Autor prezentuje różne urządzenia różnych producentów w różny sposób interpretują krajobraz i portret. Stąd różne zgłaszane wartości, na których tak naprawdę nie można polegać.
Neon Warge

36

Możesz użyć CSS3:

@media screen and (orientation:landscape)
{
   body
   {
      background: red;
   }
}

Najlepsza odpowiedź dla mnie, ponieważ nie potrzebujesz słuchacza do zmiany orientacji. Chociaż łączę to z Moderr, aby wykryć, czy jest to urządzenie dotykowe, ponieważ nie ma sensu na ekranach komputerów stacjonarnych lub laptopów. Nadal nie jest OK dla takich ekranów z funkcjami dotykowymi ...
Esger

4
Nie związany z javascript. OP potrzebuje rozwiązania javascript.
easwee

10
Nie, chce wyświetlić wiadomość, możesz użyć display: none następnie display: block, aby wyświetlić coś.
Thomas Decaux,

2
Jaka jest obsługa tego testu CSS?
ChrisF,

1
Nie wiem, ale nie znalazłem telefonu komórkowego, który go nie obsługuje. Wydaje się również, że jest zepsuty na starym Androidzie, gdy czasami pojawia się klawiatura, pojawia się zapytanie o media.
Thomas Decaux,

20

Można to zrobić na kilka sposobów, na przykład:

  • Sprawdź window.orientationwartość
  • Porównaj innerHeightvs.innerWidth

Możesz dostosować jedną z poniższych metod.


Sprawdź, czy urządzenie jest w trybie pionowym

function isPortrait() {
    return window.innerHeight > window.innerWidth;
}

Sprawdź, czy urządzenie jest w trybie poziomym

function isLandscape() {
    return (window.orientation === 90 || window.orientation === -90);
}

Przykładowe użycie

if (isPortrait()) {
    alert("This page is best viewed in landscape mode");
}

Jak wykryć zmianę orientacji?

$(document).ready(function() {
    $(window).on('orientationchange', function(event) {
        console.log(orientation);
    });
});

10

Myślę, że bardziej stabilnym rozwiązaniem jest użycie ekranu zamiast okna, ponieważ może to być zarówno - poziomy lub pionowy, jeśli zmienisz rozmiar okna przeglądarki na komputerze stacjonarnym.

if (screen.height > screen.width){
    alert("Please use Landscape!");
}

Działa to w IE 10, Firefox 23 i Chrome 29 (wszystkie przeglądarki stacjonarne).
Jakob Jenkov

1
Obsługują to wszystkie główne przeglądarki. IE 7 również
artnikpro


@ Duncan Nie. Działa na urządzeniach mobilnych. Jest to dość stara metoda i jest obsługiwana w starych przeglądarkach Safari i Android. Może nie być bardzo dokładne z siatkówką, ale do wykrywania orientacji rzutni powinno działać dobrze
artnikpro,

1
@artnikpro Testowałem to wczoraj i wydaje się, że Safari zwraca wymiary ekranu fizycznego, pomijając orientację. Zatem screen.width jest zawsze fizyczną szerokością ekranu.
Duncan Hoggan,

9

Aby zastosować wszystkie te wspaniałe komentarze do mojego codziennego kodowania, aby zachować ciągłość między wszystkimi moimi aplikacjami, postanowiłem użyć następujących elementów zarówno w moim jquery, jak i jquery mobile code.

window.onresize = function (event) {
  applyOrientation();
}

function applyOrientation() {
  if (window.innerHeight > window.innerWidth) {
    alert("You are now in portrait");
  } else {
    alert("You are now in landscape");
  }
}


5

Po eksperymentach odkryłem, że obrócenie urządzenia orientującego się zawsze wywoła resizezdarzenie okna przeglądarki . Więc w swoim module obsługi zmiany rozmiaru wystarczy wywołać funkcję taką jak:

function is_landscape() {
  return (window.innerWidth > window.innerHeight);
}

1
Zobacz powyżej, dlaczego 90 => krajobraz nie jest czymś, na czym można polegać na różnych urządzeniach.
ChrisF,

5

Połączyłem dwa rozwiązania i działa dobrze dla mnie.

window.addEventListener("orientationchange", function() {                   
    if (window.matchMedia("(orientation: portrait)").matches) {
       alert("PORTRAIT")
     }
    if (window.matchMedia("(orientation: landscape)").matches) {
      alert("LANSCAPE")
     }
}, false);

5

Nie zgadzam się z najczęściej głosowaną odpowiedzią. Użyj screeni niewindow

    if(screen.innerHeight > screen.innerWidth){
    alert("Please use Landscape!");
}

To właściwy sposób, aby to zrobić. Jeśli obliczysz za pomocą window.height, będziesz mieć problemy z Androidem. Gdy klawiatura jest otwarta, okno się kurczy. Więc użyj ekranu zamiast okna.

To screen.orientation.typedobra odpowiedź, ale z IE. https://caniuse.com/#search=screen.orientation


4

Uzyskaj orientację (w dowolnym momencie w kodzie js) za pośrednictwem

window.orientation

Kiedy window.orientationwraca 0lub 180jesteś w trybie pionowym , powracasz 90lub 270jesteś w trybie poziomym .


1
Jednak nie zwraca 270, zwraca -90.
Felipe Correa,

@FelipeCorrea Odpowiedź ma 2 lata!
Sliq

2
Wyjaśniałem, aby był ważny dla nowych użytkowników. Pomogło mi przy okazji.
Felipe Correa,

window.orientation jest przestarzałe
Jonny

4

Tylko CCS

@media (max-width: 1024px) and (orientation: portrait){ /* tablet and smaller */
  body:after{
    position: absolute;
    z-index: 9999;
    width: 100%;
    top: 0;
    bottom: 0;
    content: "";
    background: #212121 url(http://i.stack.imgur.com/sValK.png) 0 0 no-repeat; /* replace with an image that tells the visitor to rotate the device to landscape mode */
    background-size: 100% auto;
    opacity: 0.95;
  }
}

W niektórych przypadkach możesz chcieć dodać mały fragment kodu, aby przeładować stronę po obróceniu urządzenia przez użytkownika, aby CSS był poprawnie renderowany:

window.onorientationchange = function() { 
    var orientation = window.orientation; 
        switch(orientation) { 
            case 0:
            case 90:
            case -90: window.location.reload(); 
            break; } 
};

1
Wiem, że nie powinienem, ale musiałem podziękować za to, to świetne rozwiązanie.
FalsePozitive


2
//see also http://stackoverflow.com/questions/641857/javascript-window-resize-event
//see also http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html
/*
Be wary of this:
While you can just hook up to the standard window resize event, you'll find that in IE, the event is fired once for every X and once for every Y axis movement, resulting in a ton of events being fired which might have a performance impact on your site if rendering is an intensive task.
*/

//setup 
window.onresize = function(event) {
    window_resize(event);
}

//timeout wrapper points with doResizeCode as callback
function window_resize(e) { 
     window.clearTimeout(resizeTimeoutId); 
     resizeTimeoutId = window.setTimeout('doResizeCode();', 10); 
}

//wrapper for height/width check
function doResizeCode() {
    if(window.innerHeight > window.innerWidth){
        alert("Please view in landscape");
    }
}

2

kolejna alternatywa dla określenia orientacji na podstawie porównania szerokości / wysokości:

var mql = window.matchMedia("(min-aspect-ratio: 4/3)");
if (mql.matches) {
     orientation = 'landscape';
} 

Używasz go przy zdarzeniu „zmiana rozmiaru”:

window.addEventListener("resize", function() { ... });

2

iOS nie aktualizuje się screen.widthi screen.heightgdy zmienia się orientacja. System Android nie aktualizuje się window.orientationpo zmianie.

Moje rozwiązanie tego problemu:

var isAndroid = /(android)/i.test(navigator.userAgent);

if(isAndroid)
{
    if(screen.width < screen.height){
        //portrait mode on Android
    }
} else {
    if(window.orientation == 0){
        //portrait mode iOS and other devices
    }
}

Możesz wykryć tę zmianę orientacji na Androidzie i iOS za pomocą następującego kodu:

var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    alert("the orientation has changed");
}, false);

Jeśli onorientationchangezdarzenie nie jest obsługiwane, związanym zdarzeniem będzie resizezdarzenie.


2

Jeśli masz najnowsze przeglądarki, window.orientationmoże nie działać. W takim przypadku użyj następującego kodu, aby uzyskać kąt -

var orientation = window.screen.orientation.angle;

To wciąż technologia eksperymentalna, możesz sprawdzić kompatybilność przeglądarki tutaj


1

Dzięki tobyodavies za przewodnictwo.

Aby otrzymać komunikat ostrzegawczy na podstawie orientacji urządzenia mobilnego, musisz zaimplementować następujący skrypt w function setHeight() {

if(window.innerHeight > window.innerWidth){
    alert("Please view in landscape");
}


1

Rozszerza to poprzednią odpowiedź. Najlepszym rozwiązaniem, jakie znalazłem, jest stworzenie nieszkodliwego atrybutu CSS, który pojawia się tylko wtedy, gdy zapytanie medialne CSS3 jest spełnione, a następnie przeprowadzenie testu JS dla tego atrybutu.

Na przykład w CSS masz:

@media screen only and (orientation:landscape)
{
    //  Some innocuous rule here
    body
    {
        background-color: #fffffe;
    }
}
@media screen only and (orientation:portrait)
{
    //  Some innocuous rule here
    body
    {
        background-color: #fffeff;
    }
}

Następnie przejdziesz do JavaScript (używam jQuery do zabawy). Deklaracje kolorów mogą być dziwne, więc możesz użyć czegoś innego, ale jest to najbardziej niezawodna metoda, jaką znalazłem do testowania. Następnie możesz po prostu użyć zdarzenia zmiany rozmiaru, aby odebrać po przełączeniu. Złóż to wszystko dla:

function detectOrientation(){
    //  Referencing the CSS rules here.
    //  Change your attributes and values to match what you have set up.
    var bodyColor = $("body").css("background-color");
    if (bodyColor == "#fffffe") {
        return "landscape";
    } else
    if (bodyColor == "#fffeff") {
        return "portrait";
    }
}
$(document).ready(function(){
    var orientation = detectOrientation();
    alert("Your orientation is " + orientation + "!");
    $(document).resize(function(){
        orientation = detectOrientation();
        alert("Your orientation is " + orientation + "!");
    });
});

Najlepszą częścią tego jest to, że w momencie pisania tej odpowiedzi nie wydaje się mieć żadnego wpływu na interfejsy pulpitu, ponieważ (ogólnie) nie przekazują (jak się wydaje) żadnego argumentu na temat orientacji strony.


Uwaga: Windows 10 i Edge mogą w to wrzucać klucz - jeszcze nie przeprowadziłem gruntownych testów na nowej platformie, ale przynajmniej początkowo wydaje się, że może dostarczać dane orientacyjne do przeglądarki. Nadal można zbudować wokół niego witrynę, ale zdecydowanie jest to coś, o czym należy pamiętać.
Josh C

1

Oto najlepsza metoda, jaką znalazłem, na podstawie artykułu Davida Walsha ( Wykryj zmianę orientacji na urządzeniach mobilnych )

if ( window.matchMedia("(orientation: portrait)").matches ) {  
   alert("Please use Landscape!") 
}

Wyjaśnienie:

Window.matchMedia () jest rodzimą metodą, która pozwala zdefiniować regułę zapytania o media i sprawdzić jej ważność w dowolnym momencie.

Uważam, że przydatne jest dołączenie onchangedetektora do zwracanej wartości tej metody. Przykład:

var mediaQueryRule = window.matchMedia("(orientation: portrait)")
mediaQueryRule.onchange = function(){ alert("screen orientation changed") }

1

Użyłem dla systemu Android „API Orientacji ekranu”

Aby sprawdzić bieżącą orientację, wywołaj console.log (screen.orientation.type) (i może screen.orientation.angle).

Wyniki: portret-podstawowy | portretowo-wtórne | krajobraz podstawowy | krajobraz wtórny

Poniżej znajduje się mój kod, mam nadzieję, że będzie pomocny:

var m_isOrientation = ("orientation" in screen) && (typeof screen.orientation.lock == 'function') && (typeof screen.orientation.unlock == 'function');
...
if (!isFullscreen()) return;
screen.orientation.lock('landscape-secondary').then(
    function() {
        console.log('new orientation is landscape-secondary');
    },
    function(e) {
        console.error(e);
    }
);//here's Promise
...
screen.orientation.unlock();
  • Testowałem tylko dla Androida Chrome - ok

1
screen.orientation.addEventListener("change", function(e) {
 console.log(screen.orientation.type + " " + screen.orientation.angle);
}, false);

Ten fragment kodu może rozwiązać pytanie, ale wyjaśnienie naprawdę pomaga poprawić jakość posta. Pamiętaj, że w przyszłości odpowiadasz na pytanie czytelników, a ci ludzie mogą nie znać przyczyn Twojej sugestii kodu. Staraj się również nie tłoczyć kodu objaśniającymi komentarzami, ponieważ zmniejsza to czytelność zarówno kodu, jak i objaśnień!
Do widzenia StackExchange,

Ta odpowiedź nie rozwiązuje problemu w pierwotnym pytaniu. Pokazuje, jak rejestrować zmiany orientacji, ale nie pokazuje, jak wyświetlić komunikat tylko w jednej określonej orientacji.
Julian

1

Obiekt okna w JavaScript na urządzeniach z iOS ma właściwość orientacji, za pomocą której można określić obrót urządzenia. Poniżej przedstawiono wartości window.orientation dla urządzeń z systemem iOS (np. IPhone, iPad, iPod) w różnych orientacjach.

To rozwiązanie działa również na urządzeniach z Androidem. Sprawdziłem w natywnej przeglądarce Androida (przeglądarce internetowej) i przeglądarce Chrome, nawet w starych wersjach.

function readDeviceOrientation() {                      
    if (Math.abs(window.orientation) === 90) {
        // Landscape
    } else {
        // Portrait
    }
}

1

Tego używam.

function getOrientation() {

    // if window.orientation is available...
    if( window.orientation && typeof window.orientation === 'number' ) {

        // ... and if the absolute value of orientation is 90...
        if( Math.abs( window.orientation ) == 90 ) {

              // ... then it's landscape
              return 'landscape';

        } else {

              // ... otherwise it's portrait
              return 'portrait';

        }

    } else {

        return false; // window.orientation not available

    }

}

Realizacja

window.addEventListener("orientationchange", function() {

     // if orientation is landscape...
     if( getOrientation() === 'landscape' ) {

         // ...do your thing

    }

}, false);

0
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Rotation Test</title>
  <link type="text/css" href="css/style.css" rel="stylesheet"></style>
  <script src="js/jquery-1.5.min.js" type="text/javascript"></script>
  <script type="text/javascript">
        window.addEventListener("resize", function() {
            // Get screen size (inner/outerWidth, inner/outerHeight)
            var height = $(window).height();
            var width = $(window).width();

            if(width>height) {
              // Landscape
              $("#mode").text("LANDSCAPE");
            } else {
              // Portrait
              $("#mode").text("PORTRAIT");
            }
        }, false);

  </script>
 </head>
 <body onorientationchange="updateOrientation();">
   <div id="mode">LANDSCAPE</div>
 </body>
</html>

0

Istnieje sposób, dzięki któremu można wykryć, czy użytkownik przełączył urządzenie w tryb portretowy screen.orientation

Wystarczy użyć poniższego kodu:

screen.orientation.onchange = function () {
     var type = screen.orientation.type;
     if (type.match(/portrait/)) {
         alert('Please flip to landscape, to use this app!');
     }
}

Teraz onchangezostanie zwolniony, gdy użytkownik odwróci urządzenie, a ostrzeżenie wyskoczy, gdy użytkownik użyje trybu portretowego.


0

Należy zwrócić uwagę na window.orientationto, że wróci, undefinedjeśli nie korzystasz z urządzenia mobilnego. Dobra funkcja do sprawdzania orientacji może wyglądać xnastępująco window.orientation:

//check for orientation
function getOrientation(x){
  if (x===undefined){
    return 'desktop'
  } else {
    var y;
    x < 0 ? y = 'landscape' : y = 'portrait';
    return y;
  }
}

Nazwij to tak:

var o = getOrientation(window.orientation);
window.addEventListener("orientationchange", function() {
  o = getOrientation(window.orientation);
  console.log(o);
}, false);

0

Lub możesz po prostu użyć tego ..

window.addEventListener("orientationchange", function() {
    if (window.orientation == "90" || window.orientation == "-90") {
        //Do stuff
    }
}, false);
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.