it-swarm.com.de

Ermitteln Sie die Ausrichtung des Ansichtsfensters, wenn es sich bei der Ausrichtung um eine Portrait-Warnmeldung handelt, die dem Benutzer Anweisungen enthält

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

Gibt es eine Möglichkeit zu erkennen, ob der Benutzer, der diese Seite besucht, diese im Hochformatmodus anzeigt, und wenn dies der Fall ist, wird eine Meldung angezeigt, in der der Benutzer darüber informiert wird, dass die Seite am besten im Querformatmodus angezeigt wird. Wenn der Benutzer es bereits im Querformat anzeigt, wird keine Meldung angezeigt.

Im Grunde möchte ich, dass die Website die Ausrichtung des Ansichtsfensters erkennt, wenn die Ausrichtung Portrait ist, und eine Warnmeldung angezeigt wird, die den Benutzer darauf hinweist, dass diese Seite am besten im Landscape Modus angezeigt wird.

Vielen Dank, Dan

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

jQuery Mobile verfügt über ein Ereignis, das die Änderung dieser Eigenschaft übernimmt, wenn Sie gewarnt werden möchten, wenn sich jemand später dreht - orientationchange

Nach etwas googeln, window.orientation überprüfen (was ich glaube, gemessen in Grad ...

238
tobyodavies

Sie können auch window.matchMedia verwenden, den ich verwende und bevorzuge, da er 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.

121
crmpicco

David Walsh hat eine bessere und zielgerichtete Herangehensweise.

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

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

http://davidwalsh.name/orientation-change

85
Jatin

Sie können CSS3 verwenden:

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

Dafür gibt es mehrere Möglichkeiten:

  • window.orientation-Wert überprüfen
  • Vergleiche innerHeight vs. 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);
}

Beispielnutzung

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

Ich denke, die stabilere Lösung ist die Verwendung von screen anstelle von window, da dies beides sein kann - Querformat oder Hochformat, wenn Sie die Größe Ihres Browserfensters auf einem Desktop-Computer ändern.

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

Um all diese großartigen Kommentare auf meine tägliche Codierung anzuwenden, habe ich mich aus Gründen der Kontinuität zwischen allen meinen Bewerbungen entschieden, die folgenden Informationen in meinem mobilen Code für jquery und jquery mobile 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");
  }
}
8
dLindley

Versuchen Sie nicht, feste Fenster zu überprüfen. Orientierungsabfragen (0, 90 usw. bedeuten nicht Hochformat, Querformat usw.):

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

Selbst bei iOS7 hängt 0 davon ab, wie Sie in den Browser kommen

6
kev666n

Nach einigen Versuchen habe ich herausgefunden, dass das Drehen eines Orientierungssensors immer das resize-Ereignis eines Browserfensters auslöst. Rufen Sie also in Ihrem Größenänderungs-Handler einfach eine Funktion auf:

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

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

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

window.orientation

Wenn window.orientation0 oder 180 zurückgibt, befinden Sie sich im Hochformatmodus. Wenn Sie 90 oder 270 zurückgeben, befinden Sie sich im Querformatmodus.

4
Sliq

Ich stimme der am meisten bewerteten Antwort nicht zu. Verwenden Sie screen und nicht window

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

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

Der screen.orientation.type ist eine gute Antwort, aber mit IE. https://caniuse.com/#search=screen.orientation

3
Stefdelec

eine weitere Alternative zur Bestimmung der Orientierung basierend auf einem Vergleich der 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() { ... });
2
Gregor Srdic

iOS aktualisiert nicht screen.width & screen.height, wenn sich die Ausrichtung ändert. Android aktualisiert window.orientation nicht, wenn sich Änderungen ergeben. 

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 Änderung in der Ausrichtung unter Android und iOS mit folgendem Code erkennen:

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

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

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

2
Sandman
//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
Adolph Trudeau
$(window).on("orientationchange",function( event ){
    alert(screen.orientation.type)
});
2

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 ein kleines Stück Code hinzufügen, um die Seite neu zu laden, nachdem der Besucher das Gerät gedreht hat, damit das CSS richtig dargestellt wird:

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

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

1
zeuf

Vielen Dank an tobyodavies für die Orientierung.

Um eine Warnmeldung zu erhalten, die auf der Ausrichtung des mobilen Geräts basiert, müssen Sie das folgende Skript in der function setHeight() { implementieren.

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

Dies erweitert eine vorherige Antwort. Die beste Lösung, die ich gefunden habe, ist, ein harmloses CSS-Attribut zu erstellen, das nur dann angezeigt wird, wenn eine CSS3-Medienabfrage erfüllt ist.

Im CSS hätten Sie zum Beispiel:

@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 Spaß). Farbdeklarationen sind möglicherweise komisch, daher möchten Sie vielleicht etwas anderes verwenden. Dies ist jedoch die narrensicherste Methode, die ich zum Testen gefunden habe. Sie können dann einfach das Größenänderungsereignis verwenden, um beim Wechseln aufzufangen. 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 ich anscheinend keine Auswirkungen auf die Desktop-Oberflächen hatte, da ich diese Antwort geschrieben habe, da sie (im Allgemeinen) keine Argumente zur Orientierung an die Seite übergeben.

1
Josh C

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

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

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

Hier ist die beste Methode, die ich gefunden habe, basierend auf dem Artikel von David Walsh ( Orientierungsänderung auf mobilen Geräten erkennen )

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

Erklärung: 

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

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

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

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: primärporträt | Porträt-Sekundär | Landschafts-Primär | Landschaft-sekundär

Hier 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
1
Dmitry Sokolyuk

Das ist was ich benutze.

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);
1
CTE
screen.orientation.addEventListener("change", function(e) {
 console.log(screen.orientation.type + " " + screen.orientation.angle);
}, false);
1
zloctb
<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>

Einige Geräte haben das Orientierungsänderungsereignis nicht bereitgestellt, lösen jedoch das Größenänderungsereignis des Fensters aus:

// Listen for resize changes
window.addEventListener("resize", function() {
    // Get screen size (inner/outerWidth, inner/outerHeight)

}, false);

Etwas weniger offensichtlich als das Orientierungsänderungsereignis, funktioniert jedoch sehr gut. Bitte hier überprüfen

0
yadavr

Bei window.orientation ist zu beachten, dass undefined zurückgegeben wird, wenn Sie sich nicht auf einem mobilen Gerät befinden. Eine gute Funktion zur Überprüfung der Ausrichtung könnte daher folgendermaßen aussehen, wobei xwindow.orientation ist:

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

Nenne es so:

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

Oder Sie könnten dies einfach verwenden ..

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

Es gibt eine Möglichkeit, mit Hilfe von screen.orientation zu ermitteln, ob Benutzer ihr Gerät in den Hochformatmodus gewechselt haben.

Verwenden Sie einfach den untenstehenden Code:

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

Jetzt wird onchange ausgelöst, wenn der Benutzer das Gerät umdreht, und beim Hochfahren des Benutzers wird eine Warnmeldung angezeigt.

0
Naman

Wenn Sie über die neuesten Browser verfügen, funktioniert window.orientation möglicherweise nicht. Verwenden Sie in diesem Fall folgenden Code, um den Winkel zu erhalten - 

var orientation = window.screen.orientation.angle;

Dies ist immer noch eine experimentelle Technologie. Sie können die Browserkompatibilität überprüfen hier

0
Atul Kumar