如何使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在缩放时在移动设备上工作？

回答

相关问题