how - enable javascript chrome

Detecta la rotación del teléfono Android en el navegador con JavaScript

Question

Sé que en Safari en un iPhone puedes detectar la orientación de la pantalla y el cambio de orientación al escuchar el evento onorientationchange y consultar la onorientationchange del ángulo.

¿Es esto posible en el navegador de los teléfonos con Android?

Para ser claros, estoy preguntando si la rotación de un dispositivo Android puede ser detectada por JavaScript ejecutándose en una página web estándar. Es posible en un iPhone, y me preguntaba si podría hacerse para teléfonos Android.

Answer 1

Aquí está la solución:

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

Answer 2

El comportamiento real en diferentes dispositivos es inconsistente . Los eventos de cambio de tamaño y orientación pueden disparar en una secuencia diferente con frecuencia variable. Además, algunos valores (por ejemplo, screen.width y window.orientation) no siempre cambian cuando espera. Evite screen.width : no cambia al girar en iOS.

El enfoque confiable es escuchar tanto el cambio de tamaño como la orientaciónCambiar eventos (con algunos sondeos como captura de seguridad), y eventualmente obtendrás un valor válido para la orientación. En mis pruebas, los dispositivos Android ocasionalmente no activan eventos cuando rota 180 grados completos, así que también he incluido un setInterval para sondear la orientación.

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

Estos son los resultados de los cuatro dispositivos que probé (lo siento por la tabla ASCII, pero me pareció la forma más fácil de presentar los resultados). Además de la coherencia entre los dispositivos iOS, hay una gran variedad de dispositivos. NOTA: Los eventos se enumeran en el orden en que dispararon.

|==============================================================================| | Device | Events Fired | orientation | innerWidth | screen.width | |==============================================================================| | iPad 2 | resize | 0 | 1024 | 768 | | (to landscape) | orientationchange | 90 | 1024 | 768 | |----------------+-------------------+-------------+------------+--------------| | iPad 2 | resize | 90 | 768 | 768 | | (to portrait) | orientationchange | 0 | 768 | 768 | |----------------+-------------------+-------------+------------+--------------| | iPhone 4 | resize | 0 | 480 | 320 | | (to landscape) | orientationchange | 90 | 480 | 320 | |----------------+-------------------+-------------+------------+--------------| | iPhone 4 | resize | 90 | 320 | 320 | | (to portrait) | orientationchange | 0 | 320 | 320 | |----------------+-------------------+-------------+------------+--------------| | Droid phone | orientationchange | 90 | 320 | 320 | | (to landscape) | resize | 90 | 569 | 569 | |----------------+-------------------+-------------+------------+--------------| | Droid phone | orientationchange | 0 | 569 | 569 | | (to portrait) | resize | 0 | 320 | 320 | |----------------+-------------------+-------------+------------+--------------| | Samsung Galaxy | orientationchange | 0 | 400 | 400 | | Tablet | orientationchange | 90 | 400 | 400 | | (to landscape) | orientationchange | 90 | 400 | 400 | | | resize | 90 | 683 | 683 | | | orientationchange | 90 | 683 | 683 | |----------------+-------------------+-------------+------------+--------------| | Samsung Galaxy | orientationchange | 90 | 683 | 683 | | Tablet | orientationchange | 0 | 683 | 683 | | (to portrait) | orientationchange | 0 | 683 | 683 | | | resize | 0 | 400 | 400 | | | orientationchange | 0 | 400 | 400 | |----------------+-------------------+-------------+------------+--------------|

Answer 3

Es posible en HTML5.
Puede leer más (y probar una demostración en vivo) aquí: http://slides.html5rocks.com/#slide-orientation .

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

También es compatible con los navegadores deskop, pero siempre devolverá el mismo valor.

Answer 4

La excelente respuesta de two-bit-fool proporciona todos los antecedentes, pero permítanme intentar un resumen conciso y pragmático de cómo manejar los cambios de orientación en iOS y Android :

• Si solo le importan las dimensiones de la ventana (el escenario típico) , y no sobre la orientación específica:
  • Manejar el evento de cambio de resize solamente.
  • En su controlador, actúe en window.innerWidth y window.InnerHeight solamente.
  • NO use window.orientation : no estará actualizado en iOS.

• Si te preocupa la orientación específica :
  • Maneje solo el evento de cambio de resize en Android y solo el evento orientationchange en iOS.
  • En su controlador, actúe en window.orientation (y window.innerWidth y window.InnerHeight )

Estos enfoques ofrecen ligeros beneficios sobre recordar la orientación previa y comparar:

• el enfoque de solo dimensiones también funciona al desarrollar en los navegadores de escritorio que de otra manera pueden simular dispositivos móviles, por ejemplo, Chrome 23. ( window.orientation no está disponible en los navegadores de escritorio).
• no se necesita una variable global / anonymous-file-level-function-wrapper-level.

Answer 5

Otro problema: algunas tabletas Android (creo que el Motorola Xoom y un Elonex de gama baja en el que estoy probando, probablemente también otros) tienen sus acelerómetros configurados de modo que window.orientation == 0 en modo LANDSCAPE, no en retrato !

Answer 6

Para detectar un cambio de orientación en un navegador Android, adjunte un oyente al evento orientationchange o resize en la window :

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

Compruebe la propiedad window.orientation para averiguar de qué manera está orientado el dispositivo. Con los teléfonos Android, screen.width o screen.height también se actualiza a medida que se gira el dispositivo. (este no es el caso con el iPhone).

Answer 7

Siempre puedes escuchar el evento de cambio de tamaño de la ventana. Si, en ese caso, la ventana pasó de ser más alta que ancha a más alta que alta (o viceversa), puede estar bastante seguro de que la orientación del teléfono simplemente se modificó.

Answer 8

Una pequeña contribución a la respuesta de los dos idiotas:

Como se describe en la tabla sobre teléfonos android, el evento "cambio de orientación" se activa antes que el evento "cambiar el tamaño", bloqueando así la próxima llamada de cambio de tamaño (debido a la instrucción if). La propiedad de ancho aún no está establecida.

Una solución, aunque quizás no perfecta, podría ser no lanzar el evento "cambio de orientación". Eso se puede archivar envolviendo el enlace de evento "orientationchange" en la declaración "if":

if (!navigator.userAgent.match(/android/i))
{
    window.addEventListener("orientationchange", checkOrientation, false);
}

Espero eso ayude

(las pruebas se realizaron en Nexus S)

Answer 9

Vale la pena señalar que en mi Epic 4G Touch tuve que configurar la vista web para usar WebChromeClient antes de que funcionasen las llamadas de JavaScript con Android.

webView.setWebChromeClient(new WebChromeClient());

Answer 10

Yo tuve el mismo problema. Estoy usando Phonegap y Jquery mobile, para dispositivos con Android. Para cambiar el tamaño correctamente tuve que establecer un tiempo de espera:

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

Answer 11

puedes probar la solución, compatible con todos los navegadores.

La siguiente es la foto de compatibilidad de cambio de orientationchange : por lo tanto, yo orientaionchange un cambio de orientaionchange polyfill, se basa en el atributo @media para arreglar la utilidad de cambio de orientationchange-fix library-- orientationchange-fix

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

Answer 12

Navegador cruzado

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