0

我必须在 Ipad 上获取窗口的高度才能以全高显示某些内容。

我已经完成了这个示例页面：http ://daviddarx.com/stuffs/work/biceps/ipad/

这是我的js代码，很简单，只在body中写了window.height()：

generalResizeListener=function(){
    screenW=$(window).width();
    screenH=$(window).height();
    $("body").html(screenH)
    console.log(screenH);
}
$(window).resize(generalResizeListener);

有两个问题，在我的 ipad2 和 IOS7 上：-在 safari 中，但不是在 Chrome 中，显示的值不适合实际页面高度（我检查了屏幕截图）

-始终在 Safari 中，即使页面中没有任何内容，页面的高度也大于视口，我可以向下滚动 10-20 像素。这是最大的问题。

你知道为什么会这样吗？我的演示页面中没有任何css文件，所以我真的不明白。

预先感谢您的帮助！大卫

@加尔五：

我已经实现了这个“hacky 解决方案”。无论如何，谢谢您的回答！我在谷歌上看了更多，这似乎是 safari IOS7 的一个特定错误：

- https://discussions.apple.com/message/23150650#23150650

-在 iOS7 中具有固定页眉和页脚的网页上的滚动问题

- iOS 7 iPad Safari Landscape innerHeight/outerHeight 布局问题

4

3 回答 3

2

iOS 上的 Safari 浏览器有一个底栏（与 chrome 不同），它是在窗口高度内计算的，而它实际上并不是窗口/页面的一部分。

您需要检测客户端在 iOS 设备上使用 Safari 浏览器的情况（使用用户代理），然后您需要将正文的高度（使用 javascript）设置为$(window).height() - bar_height，它应该可以解决您的问题。

希望有帮助。

于 2013-11-12T13:50:47.290 回答
1

我的解决方案是这样...

在您的页面上插入：

<div id="win-height" style="position: fixed;left: 0; top: 0; bottom:0; width: 0; z-index: "></div>

代替，

$(window).height()

获取窗口高度，使用，

$('#win-height').height()

祝你好运！

于 2016-05-30T18:55:16.973 回答
0

我使用这个 JavaScript 解决方案来解决这个问题：

    if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && window.innerHeight != document.documentElement.clientHeight) {
  var fixViewportHeight = function() {
    document.documentElement.style.height = window.innerHeight + "px";
    if (document.body.scrollTop !== 0) {
      window.scrollTo(0, 0);
    }
  }.bind(this);

  window.addEventListener("scroll", fixViewportHeight, false);
  window.addEventListener("orientationchange", fixViewportHeight, false);
  fixViewportHeight();

  document.body.style.webkitTransform = "translate3d(0,0,0)";
}
于 2013-11-28T16:41:15.597 回答