Android瀏覽器的screen.width，screen.height＆window.innerWidth＆window.innerHeight是不可靠的

我正在研究針對桌面，平板電腦和智能手機上的瀏覽器的網絡應用程序。Android瀏覽器的screen.width，screen.height＆window.innerWidth＆window.innerHeight是不可靠的

該Web應用程序具有使用Colorbox與iframe執行的燈箱。當瀏覽器窗口調整大小或平板電腦/手機改變方向時，Javascript代碼將查詢窗口尺寸，以便它可以調整燈箱的某些元素。

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

的Android時，他們從窗口的resize事件，觸發多次內部查詢了screen.width，screen.height，window.innerWidth & window.innerHeight總是返回的值不同。

爲什麼Android瀏覽器返回如此大的數值差異以及如何可靠地檢測瀏覽器窗口的寬度和高度？

來源

2012-05-16 GiddyUpHorsey

沒有可靠的方法（但）。但是，監聽調整大小並等待幾（100）毫秒通常就足以使屬性在99％的時間內正確設置。將視口和目標dpi設置爲元標記也很重要。 –

我花了幾個小時找到解決方法。

window.innerHeight,window.outerheight等中唯一的常數爲screen.height。

此代碼給我的outerheight：

screen.height/window.devicePixelRatio - window.screenTop

此外，爲了支持老版本的Android，請把你的代碼放在一個setTimeout

我希望這是有益=）

來源

2012-10-04 10:01:33 Abdo

使用此代碼，您將在iOS設備上獲得錯誤的高度。在iOS screen.height返回568或480 –

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

這裏是一個非常好的writeup的情況。

來源

2013-03-21 04:43:12 six8

它看起來我的畫布元素得到正確的負載繪製並保持好幾秒後觸摸屏幕移動用戶，然後突然它變成一個小得多的尺寸（除了完整的畫布仍然只有黑色...，而較小的可視區域仍然顯示遊戲，但是以「全尺寸」尺寸而不是較小尺寸）。我正在使用window.innerWidth，嘗試與window.outerWidth，並仍然是相同的結果:( – dan2k3k4

鏈接已死亡.. – commonpike

我還注意到orientationchange'resize'事件觸發毫秒*之前* outerWidth和高度更改。 – commonpike

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-31 10:04:55 Dan

下面是基於與三星Tab鍵運行Android 4.1

screen.height讀數分化 - 給實際設備的高度，包括任務欄和標題欄
window.innerHeight - 給高度不包括任務欄，標題欄和地址欄（如果可見）
window.outerHeight - 給人不包括任務欄和標題欄高度的高度，（無論是地址欄是可見的或隱藏的，outerHeight 包括地址欄的高度。）

來源

2013-08-02 09:29:18 Ratnakar

丹的回答修正Android的瀏覽器之間的inconcistancy .. 所以我發佈我如何檢測/更改移動視口並在旋轉時調整它（不知道是否可用於任何一個...

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-13 17:32:26

試試這個，並檢查您的手機閱讀

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

應該匹配您的手機規格屏幕尺寸（高度）。

來源

2014-11-19 12:36:42 Miguel

我正在使用它來使它在ios和android之間工作。

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

來源

2015-08-06 08:43:01

在我的情況下，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-18 01:46:30 Mauro

Android瀏覽器的screen.width，screen.height＆window.innerWidth＆window.innerHeight是不可靠的

回答

相關問題