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

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.

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 ...)

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.

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

Możesz użyć CSS3:

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

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

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!");
}

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

Nie próbuj naprawiać zapytań window.orientation (0, 90 itd. Nie oznacza portretu, krajobrazu itp.):

http://www.matthewgifford.com/blog/2011/12/22/a-misconception-about-window-orientation/

Nawet na iOS7, w zależności od tego, jak wejdziesz do przeglądarki, 0 nie zawsze jest portretem

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

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

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

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 .

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

$(window).on("orientationchange",function( event ){
    alert(screen.orientation.type)
});

//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");
    }
}

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() { ... });

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.

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

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

Zamiast 270 może wynosić -90 (minus 90).

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.

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") }

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

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

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

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

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

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.

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

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

window.addEventListener("orientationchange", function() {
    if (window.orientation == "90" || window.orientation == "-90") {
        //Do stuff
    }
}, false);