确定移动设备的最大浏览器高度（地址栏未显示时）

Posted 2023-03-12

【中文标题】确定移动设备的最大浏览器高度（地址栏未显示时）

【英文标题】：Determining a mobile devices maximum browser height (when the address bar is not showing)

【发布时间】：2015-04-15 14:43:30

【问题描述】：

我已经为此工作了好几天了。翻阅无数文章，尝试了很多不同的想法。

我要做的就是拥有一个 100% 浏览器高度的背景图像或元素。 问题是，每当地址栏显示和隐藏可用空间发生变化并且图片调整大小时会导致烦人的跳转。

我正在使用一个名为 maximage 2 (http://www.aaronvanderzwan.com/maximage/) 的全屏图像滑块

首先，我尝试让 html 或 body 容器与顶部对齐并保持 120% 的高度，这样当地址栏消失时它仍然会覆盖。但是图像仍然会调整大小，因为新大小的 120% 仍然不同。

我也一直在尝试存储原始浏览器高度，然后添加该数字以补偿地址栏并将滑块调整为新大小。

我正在考虑使用设备纵横比的方式，并考虑到一些保持固定的东西，例如宽度，但这会因设备而异，并不可靠。

有没有人知道任何简单而干净的方法来简单地用图像滑块覆盖移动设备的背景，而不使用会调整大小的百分比？

【问题讨论】：

抱歉 - 我很难理解。当地址栏消失时，您不希望它调整大小吗？或者您不希望它在地址栏自身凝结时“跳跃”。因为这只是 css 做你告诉要做的事情并填充空间。

我需要一种让图像覆盖设备视点（100% 宽度和高度）但不能使用百分比的方法。 @ajmajmajma

这并不能真正回答我的问题:)。我是否可以建议发布问题和/或您尝试过的内容。您的网站链接很慢。如果没有真正看到问题或查看代码，真的很难说。有很多解决方案，这完全取决于您要做什么。您不想存储浏览器大小的窗口大小，这些窗口大小会变得非常快，而且对性能也非常不利。

根据您要查找的内容，我会检查一下 - ***.com/questions/8205812/…

是的.. 那是同样的问题.. 如果不使用 js 并猜测地址栏的高度，就没有真正的解决方案.. 我必须看看是否有人对这个问题有任何实际的解决方案@ ajmajmajma

【参考方案1】：

我遇到了同样的问题。解决方案是通过jQuery将背景高度设置为窗口高度，并在滚动事件处于活动状态时阻止调整大小事件。

这样你可以滚动让地址栏消失并且不会发生讨厌的调整大小跳转。

https://***.com/a/31546432/1612318