Wykryj orientację viewport, jeśli orientacja jest pionowa, wyświetl komunikat alertu informujący użytkownika o instrukcjach

Możesz również użyć 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
}

Testowane na iPadzie 2.

David Walsh ma lepsze podejście.

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

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

Http://davidwalsh.name/orientation-change

Możesz użyć CSS3:

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

Istnieje kilka sposobów, aby to zrobić, na przykład:

• Sprawdź window.orientation wartość
• Porównaj innerHeight vs. innerWidth

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

Sprawdź, czy urządzenie jest w trybie portretowym

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ład użycia

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 poziome, jak i pionowe, 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, dla ciągłości między wszystkimi moimi aplikacjami, zdecydowałem się użyć następującego kodu zarówno w moim jQuery i jQuery mobile.

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 naprawionego okna.zapytania orientacyjne (0, 90 itd. nie oznaczają portretu, krajobrazu itp.):

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

Nawet na iOS7 zależy jak wejdziesz do przeglądarki 0 nie zawsze jest portretem

Po kilku eksperymentach odkryłem, że obracanie urządzenia świadomego orientacji zawsze wywoła zdarzenie resize okna przeglądarki. Więc w programie obsługi zmiany rozmiaru po prostu wywołaj funkcję:

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

Uzyskaj orientację (w dowolnym momencie w kodzie js) poprzez

window.orientation

Gdy window.orientation zwróci 0 lub 180 wtedy jesteś wtrybie portretowym , po powrocie 90 lub {5]} jesteś w trybie krajobrazowym .

Nie zgadzam się z najczęściej głosowaną odpowiedzią. Użyj screen a nie window

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

screen.orientation.type to dobra odpowiedź, ale z IE. https://caniuse.com/#search=screen.orientation

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

Inna alternatywa do 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 podczas zdarzenia "resize":

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

IOS nie aktualizuje się screen.width & screen.height po zmianie orientacji. Android nie aktualizuje window.orientation, Gdy się zmienia.

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ę w orientacji na Androidzie, a także 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 zdarzenie onorientationchange nie jest obsługiwane, związane zdarzenie będzie Zdarzenie resize.

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

Dzięki tobyodavies za poprowadzenie drogi.

Aby uzyskać komunikat alertu na podstawie orientacji urządzenia mobilnego, należy zaimplementować następujący skrypt w function setHeight() {

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

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

To rozszerza się na poprzednią odpowiedź. Najlepszym rozwiązaniem, jakie znalazłem, jest stworzenie nieszkodliwego atrybutu CSS, który pojawia się tylko wtedy, gdy spełnione jest Zapytanie o media CSS3, a następnie wykonanie testu JS dla tego atrybutu.

Więc 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 przejdź do JavaScript (używam jQuery dla Zabawy). Deklaracje kolorów mogą być dziwne, więc możesz chcieć użyć czegoś innego, ale jest to najbardziej niezawodna metoda, jaką znalazłem do testowania. Możesz wtedy po prostu użyć Zmień rozmiar zdarzenia, aby odebrać przy przełączaniu. Połącz 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 + "!");
    });
});

Najlepsze jest to, że w momencie pisania tej odpowiedzi nie wydaje się, aby miało to jakikolwiek wpływ na Interfejsy desktopowe, ponieważ (ogólnie) nie przekazują (wydają się) żadnych argumentów przemawiających za orientacją strony.

Oto najlepsza metoda, jaką znalazłem, oparta na artykule Davida Walsha (wykrywanie zmiany orientacji na urządzeniach mobilnych )

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

Explanation:

Okno.matchMedia () {[5] } jest natywną metodą, która pozwala zdefiniować regułę zapytań o media i sprawdzić jej ważność w dowolnym momencie.

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

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

Używałem dla Androida Chrome "API orientacji ekranu"

Aby sprawdzić bieżącą konsolę wywołania orientacji.log(ekran.orientacja.Typ) (A może screen.orientacja.kąt).

Wyniki: portret-pierwotny | portret-wtórny | krajobraz-pierwotny / krajobraz-wtórny

Poniżej 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 window w JavaScript na urządzeniach z systemem iOS ma właściwość orientation, która może być użyta do określenia obrotu urządzenia. Poniżej znajduje się okno wartości.orientacja 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 android (Przeglądarka internetowa) i w przeglądarce Chrome, nawet w starych wersjach.

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

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 dodać mały fragment kodu, aby przeładować stronę po tym, jak odwiedzający obrócił urządzenie, tak aby CSS był renderowany poprawnie:

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

Tego właśnie 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żesz wykryć, czy użytkownik przełączył urządzenie w tryb portretowy za pomocą screen.orientation

Po prostu użyj 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, onchange zostanie uruchomiony, gdy użytkownik przewróci urządzenie, a alert pojawi się, gdy użytkownik użyje trybu portretowego.

Jedną rzeczą, którą należy pamiętać o {[2] } jest to, że powróci undefined, Jeśli nie jesteś na urządzeniu mobilnym. Więc dobra funkcja sprawdzania orientacji może wyglądać tak, gdzie x jest 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);

Albo możesz użyć tego..

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

Jeśli masz najnowsze przeglądarki window.orientation może nie działać. W takim przypadku użyj następującego kodu do uzyskania kąta -

var orientation = window.screen.orientation.angle;

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