webentwicklung-frage-antwort-db.com.de

Erkennen Sie die Drehung des Telefons Android im Browser mit JavaScript

Ich weiß, dass Sie in Safari auf einem iPhone die Ausrichtung und Änderung der Ausrichtung des Bildschirms erkennen können, indem Sie das Ereignis onorientationchange abhören und window.orientation Nach dem Winkel abfragen.

Ist dies im Browser auf Android Handys möglich?

Um es klar auszudrücken, frage ich, ob die Drehung eines Android) - Geräts durch JavaScript auf einer Standardwebseite erkannt werden kann. Dies ist auf einem iPhone und möglich Ich fragte mich, ob es für Android Handys gemacht werden könnte.

185
philnash

Um eine Orientierungsänderung in einem Android Browser zu erkennen, hängen Sie einen Listener an das Ereignis orientationchange oder resize in window an:

// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation + " " + screen.width);
}, false);

Überprüf den window.orientation Eigenschaft, um herauszufinden, in welche Richtung das Gerät ausgerichtet ist. Mit Android Handys, screen.width oder screen.height wird auch aktualisiert, wenn das Gerät gedreht wird. (Dies ist beim iPhone nicht der Fall).

212
jb.

Das tatsächliche Verhalten auf verschiedenen Geräten ist inkonsistent. Die Ereignisse "resize" und "orientationChange" können mit unterschiedlicher Häufigkeit in einer anderen Reihenfolge ausgelöst werden. Einige Werte (z. B. screen.width und window.orientation) ändern sich nicht immer, wenn Sie dies erwarten. Vermeiden Sie screen.width - es ändert sich nicht beim Drehen in iOS.

Der verlässliche Ansatz besteht darin, die Ereignisse "resize" und "orientationChange" zu hören (mit einigem Polling als Sicherheit), und Sie erhalten schließlich einen gültigen Wert für die Ausrichtung. In meinen Tests können Android Geräte gelegentlich keine Ereignisse auslösen, wenn sie um volle 180 Grad gedreht werden. Daher habe ich auch ein setInterval eingefügt, um die Ausrichtung abzufragen.

var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // orientation changed, do your magic here
    }
};

window.addEventListener("resize", checkOrientation, false);
window.addEventListener("orientationchange", checkOrientation, false);

// (optional) Android doesn't always fire orientationChange on 180 degree turns
setInterval(checkOrientation, 2000);

Hier sind die Ergebnisse der vier Geräte, die ich getestet habe (Entschuldigung für die Tabelle ASCII, aber es schien die einfachste Möglichkeit zu sein, die Ergebnisse zu präsentieren). Abgesehen von der Konsistenz zwischen den iOS-Geräten Es gibt viele verschiedene Geräte. HINWEIS: Die Ereignisse werden in der Reihenfolge aufgelistet, in der sie ausgelöst wurden.

 | =========================================== ================================ | 
 | Gerät | Ereignisse ausgelöst | Orientierung | innerWidth | Bildschirmbreite | 
 | ======================================= ==================================== | 
 | iPad 2 | Größe ändern | 0 | 1024 | 768 | 
 | (zur Landschaft) | Orientierungswechsel | 90 | 1024 | 768 | 
 | ---------------- + ------------------- + ----- -------- + ------------ + -------------- | 
 | iPad 2 | Größe ändern | 90 | 768 | 768 | 
 | (zum Porträt) | Orientierungswechsel | 0 | 768 | 768 | 
 | ---------------- + ------------------- + ----- -------- + ------------ + -------------- | 
 | iPhone 4 | Größe ändern | 0 | 480 | 320 | 
 | (zur Landschaft) | Orientierungswechsel | 90 | 480 | 320 | 
 | ---------------- + ------------------- + ----- -------- + ------------ + -------------- | 
 | iPhone 4 | Größe ändern | 90 | 320 | 320 | 
 | (zum Porträt) | Orientierungswechsel | 0 | 320 | 320 | 
 | ---------------- + ------------------- + ----- -------- + ------------ + -------------- | 
 | Droidentelefon | Orientierungswechsel | 90 | 320 | 320 | 
 | (zur Landschaft) | Größe ändern | 90 | 569 | 569 | 
 | ---------------- + ------------------- + ----- -------- + ------------ + -------------- | 
 | Droidentelefon | Orientierungswechsel | 0 | 569 | 569 | 
 | (zum Porträt) | Größe ändern | 0 | 320 | 320 | 
 | ---------------- + ------------------- + ----- -------- + ------------ + -------------- | 
 | Samsung Galaxy | Orientierungswechsel | 0 | 400 | 400 | 
 | Tablette | Orientierungswechsel | 90 | 400 | 400 | 
 | (zur Landschaft) | Orientierungswechsel | 90 | 400 | 400 | 
 | | Größe ändern | 90 | 683 | 683 | 
 | | Orientierungswechsel | 90 | 683 | 683 | 
 | ---------------- + ------------------- + ----- -------- + ------------ + -------------- | 
 | Samsung Galaxy | Orientierungswechsel | 90 | 683 | 683 | 
 | Tablette | Orientierungswechsel | 0 | 683 | 683 | 
 | (zum Porträt) | Orientierungswechsel | 0 | 683 | 683 | 
 | | Größe ändern | 0 | 400 | 400 | 
 | | Orientierungswechsel | 0 | 400 | 400 | 
 | ---------------- + ------------------- + ----- -------- + ------------ + -------------- | 
222
two-bit-fool

die ausgezeichnete Antwort von two-bit-fool liefert den gesamten Hintergrund, aber lassen Sie mich versuchen, eine prägnante, pragmatische Zusammenfassung des Umgangs mit Orientierungsänderungen unter iOS und Android:

  • Wenn Sie sich nur um Fensterabmessungen kümmern (das typische Szenario) - und nicht um die spezifische Ausrichtung:
    • Behandeln Sie nur das Ereignis resize.
    • Folgen Sie in Ihrem Handler window.innerWidth und window.InnerHeight nur.
    • Verwende nicht window.orientation - unter iOS wird es nicht aktuell sein.
  • Wenn Sie sich für die spezifische Ausrichtung interessieren :
    • Behandeln Sie nur das Ereignis resize unter Android und nur das Ereignis orientationchange unter iOS.
    • Folgen Sie in Ihrem Handler window.orientation (und window.innerWidth und window.InnerHeight)

Diese Ansätze bieten geringfügige Vorteile gegenüber dem Erinnern an die vorherige Ausrichtung und dem Vergleichen von:

  • der Nur-Dimensionen-Ansatz funktioniert auch bei der Entwicklung auf Desktop-Browsern, die ansonsten mobile Geräte simulieren können, z. B. Chrome 23. (window.orientation ist in Desktop-Browsern nicht verfügbar.
  • keine Notwendigkeit für eine globale/anonyme Variable auf Dateiebene mit Funktions-Wrapper-Ebene.
39
mklement0

Sie können jederzeit das Fenstergrößenänderungsereignis anhören. Wenn in diesem Fall das Fenster von größer als breit zu größer als hoch wurde (oder umgekehrt), können Sie sich ziemlich sicher sein, dass die Ausrichtung des Telefons gerade geändert wurde.

12
Joel Mueller

Ich hatte das gleiche problem Ich verwende Phonegap und Jquery Mobile für Android-Geräte. Um die Größe richtig zu ändern, musste ich eine Zeitüberschreitung einstellen:

$(window).bind('orientationchange',function(e) {
  fixOrientation();
});

$(window).bind('resize',function(e) {
  fixOrientation();
});

function fixOrientation() {

    setTimeout(function() {

        var windowWidth = window.innerWidth;

        $('div[data-role="page"]').width(windowWidth);
        $('div[data-role="header"]').width(windowWidth);
        $('div[data-role="content"]').width(windowWidth-30);
        $('div[data-role="footer"]').width(windowWidth);

    },500);
}
3
tauanz

Es ist in HTML5 möglich.
Sie können hier mehr lesen (und eine Live-Demo ausprobieren): http://slides.html5rocks.com/#slide-orientation .

window.addEventListener('deviceorientation', function(event) {
    var a = event.alpha;
    var b = event.beta;
    var g = event.gamma;
}, false);

Es werden auch Desktop-Browser unterstützt, es wird jedoch immer derselbe Wert zurückgegeben.

3

Hier ist die Lösung:

var isMobile = {
    Android: function() {
        return /Android/i.test(navigator.userAgent);
    },
    iOS: function() {
        return /iPhone|iPad|iPod/i.test(navigator.userAgent);
    }
};
if(isMobile.Android())
    {
        var previousWidth=$(window).width();
        $(window).on({
        resize: function(e) {
        var YourFunction=(function(){

            var screenWidth=$(window).width();
            if(previousWidth!=screenWidth)
            {
                previousWidth=screenWidth;
                alert("oreientation changed");
            }

        })();

        }
    });

    }
    else//mainly for ios
    {
        $(window).on({
            orientationchange: function(e) {
               alert("orientation changed");
            }   
        });
    }
2
Shishir Arora

Bei einigen Android Tablets (das Motorola Xoom, glaube ich, und ein billiges Elonex-Tablet, an dem ich einige Tests durchführe, wahrscheinlich auch andere) sind die Beschleunigungsmesser so eingestellt, dass sie das Fenster ausrichten == 0 im LANDSCHAFTS-Modus, kein Porträt!

1
james-geldart

sie können die Lösung ausprobieren, die mit allen Browsern kompatibel ist.

Es folgt das Kompatibilitätsbild orientationchange: compatibility Daher erstelle ich eine orientaionchange -Polyfüllung. Sie basiert auf dem @media-Attribut, um die Dienstprogrammbibliothek für Orientierungsänderungen zu reparieren. - orientedchange-fix

window.addEventListener('orientationchange', function(){
 if(window.neworientation.current === 'portrait|landscape'){
    // do something……
 } else {
    // do something……
 }
}, false);
1
Zhansingsong

Cross browser way

$(window).on('resize orientationchange webkitfullscreenchange mozfullscreenchange fullscreenchange',  function(){
//code here
});
0
comonitos

Beachten Sie, dass ich auf meinem Epic 4G Touch die Webansicht für die Verwendung von WebChromeClient einrichten musste, bevor die Aufrufe von Javascript Android funktionierten.

webView.setWebChromeClient(new WebChromeClient());
0
calebisstupid