Как получить правильную ширину окна при изменении ориентации для устройств Android как таблеток, так и мобильных телефонов

Question

Я пытаюсь вычислить ширину окна при изменении ориентации для устройств Android с помощью функции jquery $(window).outerWidth(true);. Этот расчет дает правильную ширину при изменении ориентации для iphone и ipad, но не для Android. Если я изначально загружаю страницу в альбомном режиме или в портретном режиме, я получаю правильную ширину, но как только я меняю ориентацию после загрузки страницы, я получаю ширину для портретного режима, как это было в ландшафтном режиме, и наоборот. Пожалуйста, предложите, что происходит, и как я могу справиться с этой проблемой, чтобы получить правильную ширину окна при изменении ориентации в устройстве Android.

Answer 1

Почему бы просто не использовать объект javascript screen. Вы должны быть в состоянии получить размеры экрана с:

screen.height; 
screen.width; 

Answer 2

Попробуйте window.innerWidth, соответственно, window.innerHeight; Возможно, что андроид не имеет отношения к outerWidth и Height;

Answer 3

этот пост, кажется, есть решение, которое может иметь отношение к вам:

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

Answer 4

Я также застрял в этой проблеме и найти лучшее решение, которое будет работать на всех platforms.Below является код события «changechange».

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

Надеюсь, это поможет вам и большинству других ... Привет.

Answer 5

      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 

Answer 6

Вместо того чтобы слушать orientationchange события, вы можете слушать окна размером события, убедитесь, что window.innerHeight/outerHeight свойство получило обновление.