Android浏览器的screen.width，screen.height和window.innerWidth和wind

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

本文关键字：screen window innerWidth wind height 浏览器 width Android      更新时间：2023-09-26

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

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

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

Android 总是为 screen.width、screen.height、window.innerWidth 和 window.innerHeight 返回不同的值，当它们从窗口的调整大小事件（多次触发）中查询时。

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

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

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

以下是基于运行Android 4.1的三星标签读数的区分

  • screen.height - 给出实际设备高度，包括任务栏和标题栏

  • window.innerHeight - 提供不包括任务栏、标题栏的高度和地址栏（如果可见）

  • window.outerHeight - 给出不包括任务栏和标题的高度栏高度，（无论地址栏是可见还是隐藏，外部高度包括地址栏高度。

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

window.innerHeight、window.outerheight等中唯一不变的是screen.height。

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

screen.height / window.devicePixelRatio - window.screenTop

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

我希望这是有帮助的=）

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

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

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

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

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

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

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

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

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

如果设备PixelRatio等于或大于1，则屏幕中的实际像素数（对于html页面的观点）由window.screen.width（或...高度）。

但是，如果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;
}
相关文章：