Cómo obtener el ancho de ventana correcto en el cambio de orientación para dispositivos Android, tabletas y móviles

Estoy tratando de calcular el ancho de la ventana en el cambio de orientación para dispositivos Android usando la función jquery $(window).outerWidth(true);. Este cálculo proporciona el ancho correcto en el cambio de orientación para iphone y ipad, pero no en Android. Si inicialmente cargo la página en modo apaisado o en modo vertical, obtengo el ancho correcto, pero una vez que cambio la orientación después de cargar la página, obtengo el ancho para el modo vertical como en el modo horizontal y viceversa. Para sugerir lo que está sucediendo y cómo puedo manejar este problema para que me sale el ancho de la ventana correcta sobre el cambio de orientación en el dispositivo androideCómo obtener el ancho de ventana correcto en el cambio de orientación para dispositivos Android, tabletas y móviles

Fuente

2012-04-18 user850234

Existe un problema en Android en el que a veces los números tardan unos segundos en cambiar. No estoy familiarizado con la plataforma que está utilizando, pero en C++, la solución es sondear repetidamente durante unos pocos cuadros después de un cambio de orientación. – bitwise

¿Por qué no usar el screen objeto de javascript. usted debe ser capaz de obtener las dimensiones de la pantalla con:

screen.height; 
screen.width;

Fuente

2012-04-18 18:59:56 slayton

Estoy usando '$ (window) .outerWidth (true);' como general para todos los dispositivos, incluido el de escritorio, porque también necesito verificar el tamaño del navegador. Si uso el método anterior, entonces necesitaría verificar específicamente para dispositivos Android. Todavía comprobará su respuesta pero por qué la función jquery no está dando el resultado correcto. Lo que sucede con los dispositivos Android – user850234

Esto devolverá el valor incorrecto en Android 2.3. –

es por eso que odio Android – neaumusic

Trate window.innerWidth, respectivamente, window.innerHeight; Es posible que Android no sea sobre outerWidth y Height;

Fuente

2012-04-18 19:27:44 d4rkpr1nc3

este post parece tener una solución que pueda ser relevante para usted:

http://forum.jquery.com/topic/orientationchange-event-returns-wrong-values-on-android

Fuente

2012-04-19 00:53:33 bitwise

también me he quedado atrapado en este problema y encontrar la mejor solución que trabajará en todo el platforms.Below es la código del evento 'orientationchange'.

function onOrientationChange(event) 
{ 
    setTimeout(function(){ 
     'Enter you code here'; 
    },200); 
}

Espero que te ayude a ti y a la mayoría de los demás también .. Saludos.

Fuente

2013-09-22 07:03:30

Gracias, Esto funciona. Pero no funcionará en el emulador. –

      var isMobile = { 
           Android: function() { 
            return navigator.userAgent.match(/Android/i); 
           }, 
           BlackBerry: function() { 
            return navigator.userAgent.match(/BlackBerry/i); 
           }, 
           iOS: function() { 
            return navigator.userAgent.match(/iPhone|iPad|iPod/i); 
           }, 
           Opera: function() { 
            return navigator.userAgent.match(/Opera Mini/i); 
           }, 
           Windows: function() { 
            return navigator.userAgent.match(/IEMobile/i); 
           }, 
           webOS: function() { 
            return navigator.userAgent.match(/webOS/i); 
           }, 
           any: function() { 
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); 
           } 
          }; 


          var tell_if_mobile; 
          var mobile_tablet; 
          if (isMobile.any()) { 
           tell_if_mobile = true; 
          } else { 
           tell_if_mobile = false; 
           var windowWidth = window.screen.width < window.outerWidth ? 
                window.screen.width : window.outerWidth; 
           tell_if_mobile = windowWidth < 800; 
           mobile_tablet = windowWidth >= 500 ? "Tablet/Phablet Device" : "Desktop View (Mobile)"; 
          } 

          var mobile_type; 
          mobile_type = isMobile.Android() ? "Android Device" : 
              isMobile.BlackBerry() ? "Blackberry Device" : 
              isMobile.iOS() ? "iOS Device" : 
              isMobile.Opera() ? "Opera Mobile/Mini" : 
              isMobile.Windows() ? "IEMobile" : 
              isMobile.webOS() ? "webOS device" : 
              tell_if_mobile == true ? mobile_tablet : 
              "Not a mobile device"; 
alert(mobile_type); //result

Fuente

2014-01-02 06:57:25

En lugar de escuchar a orientationChange caso, se puede escuchar a la ventana cambiar el tamaño de caso, se asegurará de que window.innerHeight/propiedades outerHeight consiguieron actualizados.

Fuente

2015-08-13 05:07:36 silver1991

En mi caso window.innerWidth no se actualiza después de un evento de cambio de orientación provocado por cambio de orientación –

Cómo obtener el ancho de ventana correcto en el cambio de orientación para dispositivos Android, tabletas y móviles

Respuesta

Cuestiones relacionadas