アンドロイドデバイスの向き変更時の正しいウィンドウ幅をタブレットとモバイルの両方で取得する方法

Question

jquery関数$(window).outerWidth(true);を使用してアンドロイドデバイスの向き変更のウィンドウ幅を計算しようとしています。この計算では、iphoneとipadの両方向の向きが正しく変更されますが、アンドロイドでは変更されません。私は最初に風景モードまたはポートレートモードでページをロードする場合、私は正しい幅を取得していますが、私はページを読み込んだ後に向きを変更すると私は横モードであったようにポートレートモードの幅を取得しています。何が起こっているのかを教えてください。どうすればこの問題を処理して、アンドロイドデバイスの向き変更に正しいウィンドウ幅を得ることができますか？

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上で動作する最適なソリューションです見つけるましたorientationchangeイベントのコード。

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

希望すると、他のほとんどの人にも役立ちます。乾杯。代わりにorientationchangeイベントを聴くの

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

、あなたがイベントのサイズを変更するウィンドウを聞くことができ、それはwindow.innerHeight/outerHeightプロパティが更新されてしまっていることを確認します。