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

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 .

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

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.

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

Sie können CSS3 verwenden:

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

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

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

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

Versuchen Sie nicht, feste Fenster auszurichten. Orientierungsabfragen (0, 90 usw. bedeuten nicht Hochformat, Querformat usw.):

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

Selbst unter iOS7 ist 0 nicht immer Hochformat, je nachdem, wie Sie in den Browser gelangen

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

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

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

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 .

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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.

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

Oder Sie könnten dies einfach verwenden ..

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