Android 浏览器的 screen.width, screen.height & window.innerWidth & window.innerHeight 不可靠

Android browser's screen.width, screen.height & window.innerWidth & window.innerHeight are unreliable

提问by GiddyUpHorsey

I'm working on a web app that is targeted to browsers on desktop, tablet and smartphone.

我正在开发一个针对台式机、平板电脑和智能手机上的浏览器的网络应用程序。

The web app has a light box implemented using Colorboxwith an iframe. When the browser window is resized or the tablet/phone has it's orientation changed, Javascript code queries the window dimensions so that it can resize some elements of the light box.

Web 应用程序有一个使用Colorbox实现的灯箱，带有iframe. 当浏览器窗口调整大小或平板电脑/手机的方向发生变化时，Javascript 代码会查询窗口尺寸，以便它可以调整灯箱的某些元素的大小。

The issue I'm having is that everything works fine on desktop (Windows: IE, Firefox, Chrome, Mac: Safari), iPad & iPhone but not on the Android smartphone (HTC) and Android Emulator.

我遇到的问题是在桌面（Windows：IE、Firefox、Chrome、Mac：Safari）、iPad 和 iPhone 上一切正常，但在 Android 智能手机 (HTC) 和 Android Emulator 上却没有。

Android always returns different values for screen.width, screen.height, window.innerWidth& window.innerHeightwhen they're queried from inside the window's resize event, which fires multiple times.

安卓总是返回的值不同screen.width，screen.height，window.innerWidth和window.innerHeight当他们从窗口的resize事件，触发多次内部查询。

Why is the Android browser returning such a wide variance in values and how can I reliably detect the width and height of the browser window?

为什么 Android 浏览器返回的值差异如此之大，我如何可靠地检测浏览器窗口的宽度和高度？

回答by six8

On Android, window.outerWidth and window.outerHeight are reliably the screen size. Depending on your version of Android, innerWidth/Height is usually incorrect.

在 Android 上，window.outerWidth 和 window.outerHeight 是可靠的屏幕尺寸。根据您的 Android 版本，innerWidth/Height 通常不正确。

Here's a really good writeupon the situation.

这是一篇关于这种情况的非常好的文章。

回答by Ratnakar

Below is differentiation based on readings with Samsung Tab running Android 4.1

以下是基于运行 Android 4.1 的 Samsung Tab 的读数的区分

• screen.height - gives actual device height including task bar and title bar
  
  
• window.innerHeight - gives the height excluding task bar, title bar and address bar(if visible)
  
  
• window.outerHeight - gives the height excluding task bar and title bar height, (no matter address bar is visible or hidden, outerHeight include the address bar height.)

• screen.height - 给出实际设备高度，包括任务栏和标题栏
  
  
• window.innerHeight - 给出不包括任务栏、标题栏和地址栏（如果可见）的高度
  
  
• window.outerHeight - 给出不包括任务栏和标题栏高度的高度，（无论地址栏是可见的还是隐藏的，outerHeight 包括地址栏的高度。）

回答by Jason Engage

I'm using this to make it work between ios and android.

我正在使用它来使其在 ios 和 android 之间工作。

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

回答by Abdo

I took me hours to find a workaround.

我花了几个小时才找到解决方法。

The only constant among window.innerHeight, window.outerheight, etc was screen.height.

当中唯一不变的window.innerHeight，window.outerheight等了screen.height。

This code gave me the outerheight:

这段代码给了我外部高度：

screen.height / window.devicePixelRatio - window.screenTop

Also, in order to support older versions of android, place your code in a setTimeout

此外，为了支持旧版本的 android，请将您的代码放在 setTimeout

I hope this is helpful =)

我希望这是有帮助的 =)

回答by Miguel

Try this, and check your mobile reading

试试这个，并检查您的移动阅读

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

It should match the screen size (height) of your phone specifications.

它应该与您手机规格的屏幕尺寸（高度）相匹配。

回答by Dan

    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);

回答by Mauro

In my case, the setTimeout hook was not useful.

就我而言， setTimeout 钩子没有用。

After some digging, I discover that different Android versions (and devices) have different devicePixelRatio values.

经过一番挖掘，我发现不同的 Android 版本（和设备）具有不同的 devicePixelRatio 值。

If the devicePixelRatio is equal or greater than 1, the actual number of pixels in the screen (for the html page point of view) is given by window.screen.width (or ...height).

如果 devicePixelRatio 等于或大于 1，则屏幕中的实际像素数（对于 html 页面的观点）由 window.screen.width（或 ...height）给出。

But, if the window.screen.width is less than 1 (it happens in some old Android devices), the actual number of pixels becomes: window.screen.width/devicePixelRatio.

但是，如果 window.screen.width 小于 1（它发生在一些旧的 Android 设备中），实际像素数变为：window.screen.width/devicePixelRatio。

So, you just have to cope with this.

所以，你只需要应付这个。

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

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

回答by Yuan Shen

Dan's answer fix the inconcistancy between android's browser.. so I post how I detect/change mobile viewport and adapt it when rotated (don't know if usable for any one...

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
}
}