Question

我正在开发针对台式机，平板电脑和智能手机浏览器的网络应用。

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

我遇到的问题是桌面上的一切正常（Windows：IE，Firefox，Chrome，Mac：Safari），iPad和iPad。 iPhone但不在Android智能手机（HTC）和Android模拟器上。

Android始终为screen.width，screen.height，window.innerWidth＆amp;返回不同的值window.innerHeight当他们从窗口的resize事件中查询时，会多次触发。

为什么Android浏览器的值会出现如此大的变化？如何可靠地检测浏览器窗口的宽度和高度？

Answer 1

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

对于这种情况，这是一个非常好的writeup。

Answer 2

以下是基于Samsung 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;
}

Android浏览器的screen.width，screen.height＆amp; window.innerWidth＆amp; window.innerHeight是不可靠的

8 个答案: