Erkennen Sie die Ausrichtung des Ansichtsfensters, wenn die Ausrichtung die Warnmeldung "Hochformat" ist, die den Benutzer über Anweisungen informiert

195

Ich baue eine Website speziell für mobile Geräte. Es gibt insbesondere eine Seite, die am besten im Querformat angezeigt wird.

Gibt es eine Möglichkeit zu erkennen, ob der Benutzer, der diese Seite besucht, sie im Hochformat anzeigt, und in diesem Fall eine Meldung anzuzeigen, die den Benutzer darüber informiert, dass die Seite am besten im Querformat angezeigt wird? Wenn der Benutzer es bereits im Querformat anzeigt, wird keine Meldung angezeigt.

Grundsätzlich möchte ich, dass die Site die Ausrichtung des Ansichtsfensters erkennt. Wenn die Ausrichtung Hochformat ist , wird eine Warnmeldung angezeigt, die den Benutzer darauf hinweist, dass diese Seite am besten im Querformat angezeigt wird .

Dan
quelle

Antworten:

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

jQuery Mobile hat ein Ereignis, das die Änderung dieser Eigenschaft behandelt ... wenn Sie warnen möchten, wenn sich jemand später dreht - orientationchange

Schauen Sie sich auch nach einigem googeln um window.orientation(was meiner Meinung nach in Grad gemessen wird ...)

tobyodavies
quelle
6
Nein, leider nicht. Das folgende Skript hat jedoch funktioniert: if (window.innerHeight> window.innerWidth) {alert ("Bitte im Querformat anzeigen"); }
Dan
8
Ich habe das Problem überkomplexiert. Das ist toll. So einfach.
76
Wenn auf vielen Geräten die Tastatur angezeigt wird, ist die verfügbare Breite größer als die Höhe, wodurch die Querformatausrichtung falsch angegeben wird.
Pierre
1
Dies funktioniert nicht, wenn es mit dem orientationchangeEreignis kombiniert wird . Es wird die alte Ausrichtung anstelle der neuen Ausrichtung angezeigt. Diese Antwort funktioniert gut in Kombination mit dem orientationchangeEreignis.
Donald Duck
2
window.orientation veraltet developer.mozilla.org/en-US/docs/Web/API/Window/orientation
kluverua
162

Sie können auch verwenden window.matchMedia, was ich verwende und bevorzuge, da es der CSS-Syntax sehr ähnlich ist:

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

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

Getestet auf iPad 2.

crmpicco
quelle
3
Die Unterstützung für diese Funktion ist allerdings etwas schwach: caniuse.com/#feat=matchmedia
Ashitaka
2
In Firefox für Android funktioniert das erst nach dem DOM-Ready-Event für mich richtig.
Inversion
13
Die Unterstützung dafür ist jetzt viel stärker. Dies scheint jetzt eine viel robustere Antwort zu sein als die akzeptierte.
JonK
2
Beachten
dzv3
2
Dies ist jetzt die richtige Antwort. Diese Funktion bietet volle Unterstützung für alle relevanten Browser.
Telarian
97

David Walsh hat einen besseren und präzisen Ansatz.

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

Während dieser Änderungen kann sich die Eigenschaft window.orientation ändern. Ein Wert von 0 bedeutet Hochformat, -90 bedeutet, dass das Gerät im Querformat nach rechts gedreht wird, und 90 bedeutet, dass das Gerät im Querformat nach links gedreht ist.

http://davidwalsh.name/orientation-change

Jatin
quelle
2
Auf dem Nexus 10, und ich weiß nichts über andere Android 10 "-Tablets, sind die Werte rückwärts. Dh 0 wird zurückgegeben, wenn sich das Gerät im Querformat und nicht im Hochformat befindet. Die obige Antwort von tobyodavies scheint jedoch auf allen Geräten, die ich verwende, gut zu funktionieren. ve getestet
Nathan
8
Die Ausrichtung 0 ist die "natürliche" Ausrichtung des Geräts und daher herstellerabhängig. Es könnte Porträt oder Landschaft sein ...
Pierre
auf dem iPad im Iframe hat nichts alarmiert
Darius.V
2
Dies ist keine gute Lösung für den Erkennungsorientierungs-Mod des Geräts. Weil sie einen Wert zurückgeben, der von der natürlichen Geräteorientierung abhängt. Beispiel auf Samsung 7 'Tablet-Porträtansicht geben 90 zurück, aber auf Nexus 4 für Porträt geben sie 0 zurück.
Dexter_ns88
3
Auf diesem Link: notes.matthewgifford.com/… Der Autor zeigt verschiedene Geräte verschiedener Hersteller, die Landschafts- und Hochformat unterschiedlich interpretieren. Daher unterschiedliche gemeldete Werte, auf die Sie sich nicht wirklich verlassen können.
Neon Warge
36

Sie können CSS3 verwenden:

@media screen and (orientation:landscape)
{
   body
   {
      background: red;
   }
}
Thomas Decaux
quelle
Beste Antwort für mich, weil Sie keinen Zuhörer für eine veränderte Orientierung benötigen. Obwohl ich es mit modernizr kombiniere, um festzustellen, ob es sich um ein Touch-Gerät handelt, macht es auf Desktop- oder Laptop-Bildschirmen keinen Sinn. Immer noch nicht in Ordnung für solche Bildschirme mit Touch-Funktionen ...
Esger
4
Nicht mit Javascript verwandt. OP benötigt eine Javascript-Lösung.
Easwee
10
Nein, er möchte eine Nachricht anzeigen. Sie können display: none und display: block verwenden, um etwas anzuzeigen.
Thomas Decaux
2
Wie ist die Unterstützung für diesen CSS-Check?
ChrisF
1
Ich weiß es nicht, aber ich habe kein Handy gefunden, das es nicht unterstützt. Außerdem scheint es auf altem Android kaputt zu sein, wenn die Tastatur manchmal angezeigt wird, wird die Medienabfrage ausgelöst.
Thomas Decaux
20

Es gibt einige Möglichkeiten, dies zu tun, zum Beispiel:

  • Prüfen window.orientationWert
  • Vergleiche innerHeightvs.innerWidth

Sie können eine der folgenden Methoden anpassen.


Überprüfen Sie, ob sich das Gerät im Hochformat befindet

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

Überprüfen Sie, ob sich das Gerät im Querformat befindet

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

Anwendungsbeispiel

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

Wie erkenne ich die Orientierungsänderung?

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

Ich denke, die stabilere Lösung besteht darin, Bildschirm anstelle von Fenster zu verwenden, da es beides sein kann - Querformat oder Hochformat, wenn Sie die Größe Ihres Browserfensters auf dem Desktop-Computer ändern.

if (screen.height > screen.width){
    alert("Please use Landscape!");
}
artnikpro
quelle
Dies funktioniert in IE 10, Firefox 23 und Chrome 29 (alle Desktop-Browser).
Jakob Jenkov
1
Alle gängigen Browser unterstützen dies. IE 7 auch
artnikpro
@ Duncan Nein. Es funktioniert auf Mobilgeräten. Es ist eine ziemlich alte Methode und wird von alten Safari- und Android-Browsern unterstützt. Es mag mit der Netzhaut nicht sehr genau sein, aber um die Ausrichtung des Ansichtsfensters zu erkennen, sollte es gut funktionieren
artnikpro
1
@artnikpro Ich habe es gestern getestet und es scheint, dass Safari die physischen Bildschirmabmessungen zurückgibt, wobei die Ausrichtung vernachlässigt wird. Die Bildschirmbreite ist also immer die physische Breite des Bildschirms.
Duncan Hoggan
9

Um all diese großartigen Kommentare auf meine tägliche Codierung anzuwenden und die Kontinuität zwischen all meinen Anwendungen zu gewährleisten, habe ich beschlossen, Folgendes sowohl in meinem jquery- als auch in meinem jquery-Mobilcode zu verwenden.

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

Nach einigen Experimenten habe ich festgestellt, dass das Drehen eines orientierungsbewussten Geräts immer das resizeEreignis eines Browserfensters auslöst . Rufen Sie in Ihrem Resize-Handler einfach eine Funktion auf wie:

function is_landscape() {
  return (window.innerWidth > window.innerHeight);
}
Dave Sag
quelle
1
Lesen Sie oben, warum Sie sich auf 90 => Landscape nicht auf verschiedene Geräte verlassen können.
ChrisF
5

Ich habe zwei Lösungen kombiniert und es funktioniert gut für mich.

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

Ich bin mit der am häufigsten gewählten Antwort nicht einverstanden. Verwenden Sie screenund nichtwindow

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

Ist der richtige Weg, es zu tun. Wenn Sie mit rechnenwindow.height , haben Sie Probleme mit Android. Wenn die Tastatur geöffnet ist, wird das Fenster verkleinert. Verwenden Sie also Bildschirm anstelle von Fenster.

Das screen.orientation.typeist eine gute Antwort, aber mit IE. https://caniuse.com/#search=screen.orientation

Stefdelec
quelle
4

Holen Sie sich die Orientierung (jederzeit in Ihrem js-Code) über

window.orientation

Wenn Sie window.orientationzurückkehren 0oder wenn 180Sie sich im Hochformat befinden , wenn Sie zurückkehren 90oder wenn 270Sie sich im Querformat befinden .

Sliq
quelle
1
Es gibt jedoch nicht 270 zurück, sondern -90.
Felipe Correa
@FelipeCorrea Die Antwort ist 2 Jahre alt!
Sliq
2
Ich habe klargestellt, dass es für neue Besucher gültig sein soll. Es hat mir übrigens geholfen.
Felipe Correa
window.orientation ist veraltet
Jonny
4

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

In einigen Fällen möchten Sie möglicherweise einen kleinen Code zum erneuten Laden auf die Seite hinzufügen, nachdem der Besucher das Gerät gedreht hat, damit das CSS ordnungsgemäß gerendert wird:

window.onorientationchange = function() { 
    var orientation = window.orientation; 
        switch(orientation) { 
            case 0:
            case 90:
            case -90: window.location.reload(); 
            break; } 
};
cptstarling
quelle
1
Ich weiß, ich sollte nicht, aber ich musste mich dafür bedanken, es ist eine großartige Lösung.
FalsePozitive
3
$(window).on("orientationchange",function( event ){
    alert(screen.orientation.type)
});
Jomin George Paul
quelle
leider nicht unterstützt von Safari
Jesper Lehtinen
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");
    }
}
Adolph Trudeau
quelle
2

Eine weitere Alternative zur Bestimmung der Ausrichtung anhand des Vergleichs von Breite / Höhe:

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

Sie verwenden es für das Ereignis "Größe ändern":

window.addEventListener("resize", function() { ... });
Gregor Srdic
quelle
2

iOS wird nicht aktualisiert screen.widthund screen.heightwenn sich die Ausrichtung ändert. Android wird nicht aktualisiert, window.orientationwenn es sich ändert.

Meine Lösung für dieses Problem:

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

Sie können diese Orientierungsänderung sowohl auf Android als auch auf iOS mit dem folgenden Code erkennen:

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

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

Wenn das onorientationchangeEreignis nicht unterstützt wird, ist das Ereignis an das Ereignis gebunden resize.

Sandmann
quelle
2

Wenn Sie die neuesten Browser haben window.orientation, funktioniert dies möglicherweise nicht. Verwenden Sie in diesem Fall den folgenden Code, um den Winkel zu ermitteln:

var orientation = window.screen.orientation.angle;

Dies ist immer noch eine experimentelle Technologie, können Sie die Browser - Kompatibilität überprüfen hier

Atul Kumar
quelle
1

Vielen Dank an tobyodavies für die Anleitung.

Um eine Warnmeldung basierend auf der Ausrichtung des Mobilgeräts zu erhalten, müssen Sie das folgende Skript in der implementieren function setHeight() {

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

Anstelle von 270 kann es -90 (minus 90) sein.

zeuf
quelle
1

Dies erweitert eine vorherige Antwort. Die beste Lösung, die ich gefunden habe, besteht darin, ein harmloses CSS-Attribut zu erstellen, das nur angezeigt wird, wenn eine CSS3-Medienabfrage erfüllt ist, und dann den JS-Test für dieses Attribut durchzuführen.

So hätten Sie beispielsweise im CSS:

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

Sie gehen dann zu JavaScript (ich verwende jQuery für Funsies). Farbdeklarationen mögen seltsam sein, daher möchten Sie vielleicht etwas anderes verwenden, aber dies ist die narrensicherste Methode, die ich zum Testen gefunden habe. Sie können dann einfach das Größenänderungsereignis verwenden, um das Umschalten zu erfassen. Alles zusammen für:

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

Das Beste daran ist, dass diese Antwort zum Zeitpunkt des Schreibens keine Auswirkungen auf Desktop-Schnittstellen zu haben scheint, da sie (im Allgemeinen) kein Argument zur Orientierung an die Seite übergeben (scheinen).

Josh C.
quelle
Als Hinweis: Windows 10 und Edge werfen möglicherweise einen Schraubenschlüssel in diese Richtung - ich habe noch keine wesentlichen Tests auf der neuen Plattform durchgeführt, aber zumindest anfangs scheint es, als würde sie dem Browser Orientierungsdaten liefern. Es ist immer noch möglich, Ihre Site darum herum zu erstellen, aber es ist definitiv etwas, das Sie beachten sollten.
Josh C
1

Hier ist die beste Methode, die ich gefunden habe, basierend auf David Walshs Artikel ( Orientierungsänderung auf Mobilgeräten erkennen )

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

Erläuterung:

Window.matchMedia () ist eine native Methode, mit der Sie eine Medienabfrageregel definieren und ihre Gültigkeit zu jedem Zeitpunkt überprüfen können.

Ich finde es nützlich, einen onchangeListener an den Rückgabewert dieser Methode anzuhängen . Beispiel:

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

Ich habe für Android Chrome "The Screen Orientation API" verwendet.

Um die aktuelle Ausrichtung anzuzeigen, rufen Sie console.log (screen.orientation.type) (und möglicherweise screen.orientation.angle) auf.

Ergebnisse: Porträt-Primär | Porträt-Sekundär | landschaftlich-primär | landschaftssekundär

Unten ist mein Code, ich hoffe es wird hilfreich sein:

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();
  • Ich habe nur für Android Chrome getestet - ok
Dmitry Sokolyuk
quelle
1
screen.orientation.addEventListener("change", function(e) {
 console.log(screen.orientation.type + " " + screen.orientation.angle);
}, false);
zloctb
quelle
Während dieses Code-Snippet die Frage lösen kann, hilft eine Erklärung wirklich, die Qualität Ihres Beitrags zu verbessern. Denken Sie daran, dass Sie die Frage in Zukunft für Leser beantworten und diese Personen möglicherweise die Gründe für Ihren Codevorschlag nicht kennen. Bitte versuchen Sie auch, Ihren Code nicht mit erklärenden Kommentaren zu überfüllen, da dies die Lesbarkeit sowohl des Codes als auch der Erklärungen beeinträchtigt!
Auf Wiedersehen StackExchange
Diese Antwort löst das Problem in der ursprünglichen Frage nicht. Es wird gezeigt, wie Änderungen der Ausrichtung protokolliert werden, es wird jedoch nicht gezeigt, wie eine Nachricht nur in einer bestimmten Ausrichtung angezeigt wird.
Julian
1

Das Fensterobjekt in JavaScript auf iOS-Geräten verfügt über eine Ausrichtungseigenschaft, mit der die Drehung des Geräts bestimmt werden kann. Im Folgenden wird die Wertefensterausrichtung für iOS-Geräte (z. B. iPhone, iPad, iPod) in verschiedenen Ausrichtungen angezeigt.

Diese Lösung funktioniert auch für Android-Geräte. Ich habe im nativen Android-Browser (Internetbrowser) und im Chrome-Browser eingecheckt, auch in den alten Versionen.

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

Das benutze ich.

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

    }

}

Implementierung

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

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

         // ...do your thing

    }

}, false);
CTE
quelle
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>
Gaurav Kumar MVC Experte
quelle
0

Es gibt eine Möglichkeit, mit der Sie erkennen können, ob Benutzer ihr Gerät mithilfe von in den Hochformatmodus versetzt haben screen.orientation

Verwenden Sie einfach den folgenden Code:

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

onchangeWird jetzt ausgelöst, wenn der Benutzer das Gerät umdreht, und es wird eine Warnung angezeigt, wenn der Benutzer den Hochformatmodus verwendet.

Naman
quelle
0

Beachten Sie, window.orientationdass es zurückgegeben wird, undefinedwenn Sie sich nicht auf einem mobilen Gerät befinden. Also eine gute Funktion für die Ausrichtung zu überprüfen , wie diese aussehen könnte, wo xist window.orientation:

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

Nennen Sie es so:

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

Oder Sie könnten dies einfach verwenden ..

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