33

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

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

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

当从窗口的 resize 事件中查询它们时，Android 总是返回不同的值screen.width，该事件会触发多次。screen.heightwindow.innerWidthwindow.innerHeight

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

4

8 回答 8

16

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

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

于 2013-03-21T04:43:12.167 回答
4

以下是基于运行 Android 4.1 的三星 Tab 读数的差异

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

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

  • window.outerHeight - 给出不包括任务栏和标题栏高度的高度，（无论地址栏是可见还是隐藏，outerHeight 包括地址栏高度。）
于 2013-08-02T09:29:18.587 回答
3

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

window.innerHeight,window.outerheight等中唯一的常数是screen.height.

这段代码给了我outerheight：

screen.height / window.devicePixelRatio - window.screenTop

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

我希望这会有所帮助 =)

于 2012-10-04T10:01:33.770 回答
3

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

var screenHeight = (ionic.Platform.isIOS()) ? window.screen.height : window.innerHeight * window.devicePixelRatio;
于 2015-08-06T08:43:01.633 回答
2

试试这个，检查你的手机阅读

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

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

于 2014-11-19T12:36:42.333 回答
0 
    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);
于 2013-07-31T10:04:55.580 回答
0

丹的回答解决了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
}
}
于 2013-09-13T17:32:26.393 回答
0

就我而言， 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;
}
于 2016-07-18T01:46:30.947 回答