web-dev-qa-db-ja.com

Androidブラウザのscreen.width、screen.height＆window.innerWidth＆window.innerHeightは信頼できません

私は、デスクトップ、タブレット、およびスマートフォンのブラウザーを対象とするWebアプリを開発しています。

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

私が抱えている問題は、すべてがデスクトップ（Windows：IE、Firefox、Chrome、Mac：Safari）、iPadおよびiPhoneで正常に動作するが、Androidスマートフォン（HTC）および= Android Emulator。

Androidは、複数回発生するウィンドウのサイズ変更イベント内から照会されると、screen.width、screen.height、window.innerWidth＆window.innerHeightに対して常に異なる値を返します。

なぜAndroidブラウザーは値のこのような幅広い変動を返すのですか？どうすればブラウザーウィンドウの幅と高さを確実に検出できますか？

javascriptandroidhtmldom
30
GiddyUpHorsey

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

これは本当に良い writeup の状況です。

16
six8

以下は、Android 4.1

  • screen.height-タスクバーとタイトルバーを含む実際のデバイスの高さを提供します

  • window.innerHeight-タスクバー、タイトルバー、アドレスバーを除く高さを指定します（表示されている場合）

  • window.outerHeight-タスクバーとタイトルバーの高さを除く高さを指定します（アドレスバーが表示または非表示に関係なく、outerHeightにはアドレスバーの高さが含まれます）。
4
Ratnakar

IOSとAndroidの間で機能させるためにこれを使用しています。

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

回避策を見つけるのに何時間もかかりました。

window.innerHeight、window.outerheightなどの中で唯一の定数はscreen.heightでした。

このコードは私に外高さを与えました：

screen.height / window.devicePixelRatio - window.screenTop

また、Androidの古いバージョンをサポートするには、コードをsetTimeoutに配置します

これがお役に立てば幸いです=）

2
Abdo

これを試して、モバイル読書をチェックしてください

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

電話機の仕様の画面サイズ（高さ）と一致する必要があります。

1
Miguel
    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);
0
Dan

ダンの答えは、Androidのブラウザ間の矛盾を修正します..モバイルビューポートを検出/変更し、回転時に適応させる方法を投稿します（いずれかで使用可能かどうかわからない...

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
}
}
0
Yuan Shen

私の場合、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;
}
0
Mauro