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。

当窗口的resize事件内部查询时，Android总是返回screen.width ， screen.height ， window.innerWidth和window.innerHeight不同值。

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

Answer 1

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

这是关于这种情况的非常好的写作 。

Answer 2

以下是基于三星Tab运行Android 4.1的读数的区别

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

Answer 3

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

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

Answer 4

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

window.innerHeight ， window.outerheight等中唯一的常量是screen.height 。

这段代码给了我外在的高度：

screen.height / window.devicePixelRatio - window.screenTop

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

我希望这是有帮助的=）

Answer 5

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

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

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

Answer 6

    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 7

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

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