如何使window.innerHeight在縮放時在移動設備上工作？

window.innerHeight

是的，它會返回一個移動設備上的瀏覽器的高度值。但是，當用戶嘗試縮放以放大或縮小時，問題就出現了（在某些瀏覽器上）。該值無法正確調整，而是返回頁面的全長。如何使window.innerHeight在縮放時在移動設備上工作？

比方說加載時，它是500像素。用戶然後放大，高度現在是200px。但是，該值仍然會返回500px。

有誰知道解決這個問題的方法？一直在尋找。

來源

2012-03-23 Chris

我解決了這個問題的方法是，以消除任何調整大小的回調在我的代碼。聽起來很奇怪，但它對我有用。

來源

2012-03-23 01:40:53 Dylan

這將意味着innerHeight並給出正確的價值，有東西在我的代碼，是造成問題。我沒有測試過，但我不相信是這樣。在android瀏覽器和Firefox手機中，innerheight不會返回放大高度。 Opera移動工作正常，但。 – Chris 2012-03-23 01:57:42

退房在這個環節上公認的答案： Detect page zoom change with jQuery in Safari

如果您想innerHeight，可能會得到原始的寬度，然後縮放寬度，得到變焦比，然後計算出新的高度（變焦之後）。

來源

2012-03-23 03:38:05

這可能適用於Safari，但不適用於Android Browser和FireFox Mobile。儘管如果我能夠檢測到變焦跨瀏覽器手機，這肯定會是一個解決方案。 – Chris 2012-03-24 13:00:28

你檢查過了嗎？** document.documentElement.clientWidth **？當你縮放時，innerHeight會調整，但clientWidth/clientHeight不會。 – 2012-03-26 01:48:28

這對我有用。我做的第一件事是在頁面加載時從dom中獲取window.innerHeight和window.innerWidth，以便獲取原始值並將它們存儲在JavaScript變量中。然後在我的window.onresize事件處理程序中，我這樣做。

var height = null; 
var width = null; 

if (window.orientation && window.orientation == -90) { 
    height = myOriginalHeight; 
    width = myOriginalWidth; 
} 
else { 
    height = myOriginalWidth; 
    width = myOriginalHeight; 
} 
doCallbacks(width, height);

我的應用調整了很多，因爲我試圖爲所有屏幕類型編寫一個ui。根據我對應用程序的測試，這適用於ipad和andriod，以及放大時的所有縮放工作或者有時會導致縮放發生的方向更改。

這樣做的有趣的方面是移動瀏覽器從未真正改變屏幕尺寸，因爲它們是固定的，他們只是變焦。但如果你調整到原來的寬度/高度，並以這種方式處理方向，它似乎工作。

來源

2013-12-20 20:59:26 Damien

如何使window.innerHeight在縮放時在移動設備上工作？

回答

相關問題