Androidブラウザのscreen.width、screen.height＆window.innerWidth＆window.innerHeightは信頼性が低い

Question

デスクトップ、タブレット、スマートフォンのブラウザを対象としたウェブアプリを開発しています。

ウェブアプリケーションには、Colorboxにiframeを使用して実装されたライトボックスがあります。ブラウザウィンドウのサイズが変更されたり、タブレット/電話機の向きが変更されたりすると、Javascriptコードはウィンドウサイズを照会して、ライトボックスの一部のサイズを変更できるようにします。

問題は、すべてデスクトップ（Windows：IE、Firefox、Chrome、Mac：Safari）、iPad & iPhoneでは問題なく動作しますが、Androidスマートフォン（HTC）とAndroid Emulatorでは動作しません。それらは複数回発射し、ウィンドウのサイズ変更イベント、内部から照会しているとき

アンドロイドは常にscreen.width、screen.height、window.innerWidth & window.innerHeightに異なる値を返します。

なぜAndroidブラウザで値が大きく変動し、ブラウザウィンドウの幅と高さを確実に検出できるのですか？

Answer 1

回避方法を見つけるのに数時間かかりました。

window.innerHeight,window.outerheightなどの定数はscreen.heightであった。

このコードは、私にouterheightを与えた：

screen.height/window.devicePixelRatio - window.screenTop 

また、アンドロイドの古いバージョンをサポートするために、setTimeout

であなたのコードを配置し、私は=これは便利であると思います）

Answer 2

Androidでは、window.outerWidthとwindow.outerHeightは確実に画面サイズです。 Androidのバージョンによっては、通常、innerWidth/Heightが正しくありません。

ここには本当に良いwriteupがあります。以下は

Answer 3

var throttle = (function() { 
     var timer; 

     return function (fn, delay) { 
      clearTimeout(timer); 
      timer = setTimeout(fn, delay); 
     }; 
    })(), 


    var callback = function (w, h) { 
     alert(w + ' ' + h); 
    } 


    window.onresize = throttle(function() { 
     width = Math.min(window.innerWidth, window.outerWidth); 
     height = Math.min(window.innerHeight, window.outerHeight); 

     callback(width, height); 
    }, 60); 

Answer 4

アンドロイド4.1

• screen.heightを実行しているサムスンタブとの測定値に基づいて差別化である - タスクバーと タイトルバー
  
  
• window.innerHeightを含む実際のデバイスの高さを与える - 与えますタスクバーを除く高さ、タイトルバー とアドレスバー（表示されている場合）
  
  
• window.outerHeight - タスクバーとタイトル バーの高さを除いた高さを与え、（関係なくアドレスバーが表示または非表示ではありません、 は、アドレスバーの高さを含めouterHeight。）

Answer 5

ダンの答えは... をAndroidのブラウザ間のinconcistancyをので修正Iどのように私は検出/モバイルビューポートを変更し、回転時にそれを適応させる投稿する （いずれかのために使用できるかどうかわからない...

var lastorg=0; //set the begining of script 
thisorg=parseInt(window.innerWidth)/parseInt(window.innerHeight); //for ratio to detact orietation 
if(((lastorg<1 && thisorg>1) ||(lastorg>1 && thisorg<1) ||lastorg==0)){ //is start or change 
$("#viewport").attr('content', 'width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1'); // reset viewport to device 
mywidth = Math.min(window.innerWidth, window.outerWidth); //Dan's way to fix the inconsistancy 
myheight = Math.min(window.innerHeight, window.outerHeight); 
lastorg=thisorg; //update the lastorg 
wr=parseInt(mywidth)/1280; // the minimum desire width 
hr=parseInt(myheight)/630; // the minimum desire height 
if(hr<wr){ 
vscale=hr; 
if(hr<1){ // if it if small screen, so desktop pc wouldn't change 
windowHeight=630; 
windowwidth=mywidth/hr; 
} 
}else{ 
vscale=wr; 
if(wr<1){ 
    windowwidth=1280; 
    windowHeight=myheight/wr; 
} 
} 
$("#viewport").attr('content', 'width=device-width, initial-scale='+vscale+',minimum-scale='+vscale+', maximum-scale='+vscale); //reset viewport toresize window 
if(thisorg>1){ 
    $("#pro").fadeOut(500); 
}else{ 
$("body").prepend("<div id=pro style='position:absolute;width:800px;height:30px;padding:30px;left:"+(windowwidth/2)+"px;top:"+(windowHeight/2)+"px;margin-left:-430px;margin-top:-45px;;border:1px solid #555;background:#ddeeff;text-align:center;z-index:99999;color:#334455;font-size:40px;' class=shadowme>Please rotate your phone/tablet</div>");//tell user to rotate 
} 
} 

Answer 6

それはあなたの携帯電話の仕様の画面サイズ（高さ）を一致させる必要があり、これを試してみてください、そして、あなたの携帯読書

<script> 
var total_height=screen.height*window.devicePixelRatio; 
alert(total_height); 
</script> 

をご確認ください。

Answer 7

私はそれは、IOSとAndroidの間で動作させるために、これを使用しています。

var screenHeight = (ionic.Platform.isIOS()) ? window.screen.height : window.innerHeight * window.devicePixelRatio; 

Answer 8

私の場合、setTimeoutフックは役に立ちませんでした。いくつかの掘削後

は、私は別のAndroidのバージョン（およびデバイス）が異なるdevicePixelRatio値を持っていることを発見します。

devicePixelRatioが1以上の場合、画面内の実際のピクセル数（htmlページポイントの場合）は、window.screen.width（または... height）で与えられます。

ただし、window.screen.widthが1未満の場合（古いAndroid搭載デバイスの場合）、実際のピクセル数はwindow.screen.width/devicePixelRatioになります。

だから、あなたはちょうどこれに対処しなければなりません。

w = window.screen.width; 
h = window.screen.height; 

if(window.devicePixelRatio < 1){ 
    w = window.screen.width/window.devicePixelRatio; 
    h = window.screen.height/window.devicePixelRatio; 
}