0

我想要的是：

我试图找出我的网页跨设备的有效视口大小 - 因此屏幕上内容可用的大小，没有状态栏和其他东西。

我尝试了什么：

  • screen.availWidth/ screen.availHeight- 似乎这实际上抓住了浏览器窗口大小或其他东西。无论如何，状态栏等东西都在这。

  • jQuery 的$(document).width()/ $(document).height()- 显然不起作用，因为它给出了整个文档的大小，我只想要视口。

  • jQuery 的$(window).width()/ $(window).height()- UI 似乎也包含在其中。此外，在横向模式下，这有时会在 iOS 上产生非常奇怪的结果（在我的 iPad 2 上，宽度和高度都返回 1024 - 很奇怪！）

  • window.outerWidth/ window.outerHeight- 似乎和$(window)同行一样

  • window.innerWidth/ window.innerHeight- 这似乎是要走的路，但是我现在将描述一个主要问题。

为什么不window.innerX工作？

至少在 iOS 7 上，最大的问题是：橡皮筋。例如，如果我确定innerHeight当前正在进行一些橡皮筋，则该值太小 - 似乎从 减去橡皮筋区域（橡皮筋期间的灰色区域）innerHeight，这实际上使这对我来说完全没用，因为我试图在触摸事件期间获得这个值。我发现没有办法阻止这种情况（除了禁用橡皮筋），也没有办法找到当前的橡皮筋区域大小或其他东西。offsetTop似乎是 0，所以那里没有橡皮筋。

任何想法如何解决这个问题？在纵向和横向中获得实际视口大小的任何好方法？

更新/解决方案

我还没有找到解决 / 的橡皮筋问题的解决方案，innerWidth但Height似乎 jQuery 的$(window).width()/height()通常会给出视口大小。这对我来说不能正常工作的原因是我height=device-height在视口元标记中使用了。忽略这一点，返回的值似乎几乎是我想要的。

4

0 回答 0