如何使 window.innerHeight 在缩放时在移动设备上工作

How to make window.innerHeight work on mobile devices when zooming?

本文关键字：工作 移动 缩放 何使 window innerHeight      更新时间：2023-09-26
window.innerHeight

是的，它将返回移动设备上浏览器高度的值。 但是，当用户尝试捏合以放大或缩小时，问题就出现了(在某些浏览器上(。 该值不会正确调整，而是仍返回页面的完整长度。

假设加载时是 500px。 然后用户放大，高度现在为 200px。 但是，该值仍返回 500px。

有谁知道解决此问题的方法？ 一直在寻找。

我解决这个问题的方法是删除代码中的任何调整大小回调。听起来很奇怪，但它对我有用。

在此链接中查看接受的答案：在 Safari 中使用 jQuery 检测页面缩放变化

如果你想要innerHeight，可能是得到原始宽度，然后缩放宽度，获取缩放比例，然后计算新的高度(缩放后(。

这对

我有用。我做的第一件事是在页面加载时从 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，并且在放大或方向更改时所有大小调整都有效，这有时会导致缩放发生。

有趣的是，移动浏览器实际上永远不会改变屏幕尺寸，因为它们是固定的，它们只是缩放。但是，如果您调整为原始宽度/高度并以这种方式处理方向，它似乎可以工作。

相关文章：