it-swarm.com.de

Orientierungsänderung mit Hilfe von Javascript erkennen

Ist es möglich, die Änderung der Ausrichtung des Browsers auf dem iPad oder Galaxy Tab mit Hilfe von Javascript zu erkennen? Ich denke, dass es möglich ist, CSS-Abfragen zu verwenden.

20
manraj82

UPDATE:

Vielleicht möchten Sie auschecken 

jQuery Mobile Orientierungsänderung

oder die einfache JS:

window.addEventListener("orientationchange", function() {
  alert(window.orientation);
}, false);

MDN:

window.addEventListener("orientationchange", function() {
    alert("the orientation of the device is now " + screen.orientation.angle);
});

Ältere Antwort

http://www.nczonline.net/blog/2010/04/06/ipad-web-entwicklungstipps/

Safari auf dem iPad unterstützt die window.orientation -Eigenschaft. Sie können dies daher verwenden, um zu bestimmen, ob sich der Benutzer im horizontalen oder vertikalen Modus befindet. Zur Erinnerung an diese Funktionalität:

window.orientation is 0 when being held vertically
window.orientation is 90 when rotated 90 degrees to the left (horizontal)
window.orientation is -90 when rotated 90 degrees to the right (horizontal)

Es gibt auch das Ausrichtungsänderungsereignis, das für das Fensterobjekt ausgelöst wird, wenn das Gerät gedreht wird.

Sie können auch CSS-Medienabfragen verwenden, um zu bestimmen, ob das iPad in vertikaler oder horizontaler Ausrichtung gehalten wird, z.

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta -Tags.htm

<script type="text/javascript">
var updateLayout = function() {
  if (window.innerWidth != currentWidth) {
    currentWidth = window.innerWidth;
    var orient = (currentWidth == 320) ? "profile" : "landscape";
    document.body.setAttribute("orient", orient);
    window.scrollTo(0, 1);
  }
};

iPhone.DomLoad(updateLayout);
setInterval(updateLayout, 400);
</script>
24
mplungjan

Sie können das Orientierungsänderungsereignis wie folgt verwenden:

window.addEventListener('orientationchange', function(){
     /* update layout per new orientation */
});
5
mdale

Ein einfach zu verwendender Ausschnitt:

function doOnOrientationChange()
{
    switch(window.orientation)
    { 
        case -90:
        case 90:
          // alert('landscape');
          $('#portrait').css({display:'none'});
          $('#landscape').css({display:'block'});

          break;
        default:
          // alert('portrait');
          $('#portrait').css({display:'block'});
          $('#landscape').css({display:'none'});
          break;
    }
}

window.addEventListener('orientationchange', doOnOrientationChange);

// First launch
doOnOrientationChange();
0
Bryan Dartout

Von " Geräteübergreifende, browserübergreifende Erkennung von Hochformat "

Hier geht es darum herauszufinden, ob sich ein Mobilgerät im Hoch- oder Querformat befindet. Sie brauchen sich nicht um die Orientierung zu kümmern. Wenn Sie Ihr iPad verkehrt herum halten, ist es im Hochformat.

$(window).bind("resize", function(){
    screenOrientation = ($(window).width() > $(window).height())? 90 : 0;
});

90 bedeutet Querformat, 0 bedeutet Hochformat, Querbrowser, Quergerät.

Das window.onresize -Ereignis ist überall verfügbar und wird immer zur richtigen Zeit ausgelöst. nie zu früh, nie zu spät. In der Tat ist auch die Größe des Bildschirms immer genau.

Die JavaScript-Version wäre dies, korrigiere mich bitte, wenn ich falsch liege.

  function getScreenOrientation() {
    screenOrientation = window.outerWidth > window.outerHeight ? 90 : 0;
    console.log("screenOrientation = " + screenOrientation);
  }
  window.addEventListener("resize", function(event) {
    getScreenOrientation();
  });
  getScreenOrientation();
0
lowtechsun

Zusätzlich zur Antwort von @mplungjan fand ich bessere Ergebnisse mit dem Webkit-Ereignis "native" (ich kann es nicht wirklich nennen): ' deviceorientation '.

Im Mozilla Developer Network haben sie eine gute Erklärung, wie man zwischen Webkit und Gecko normalisiert, was mir geholfen hat, dieses Problem zu lösen.

0
Hugo

fensterorientierung ist das, wonach Sie suchen. Es gibt auch ein onOrientationChange-Ereignis , das für Android, iPhone und, meistens, für iPad, funktioniert

0
hachev

Sie können mediaMatch verwenden, um CSS-Medienabfragen auszuwerten, z.

window
    .matchMedia('(orientation: portrait)')
    .addListener(function (m) {
        if (m.matches) {
            // portrait
        } else {
            // landscape
        }
    });

Die CSS-Medienabfrage wird vor der orientationchange ausgelöst. Wenn Sie das Ende des Ereignisses erfassen möchten (wenn die Drehung abgeschlossen ist), siehe Höhe des mobilen Ansichtsfensters nach Orientierungsänderung .

0
Gajus