Ipad：window.height（）在Safari中給出​​了不好的價值但在Chrome中沒有

Question

我必須在Ipad上獲得窗口的高度以顯示全高度的東西。

我做了這個示例頁面： http ： //daviddarx.com/stuffs/work/biceps/ipad/

這是我的js代碼，非常簡單，只在體內編寫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-20px。 這是最大的問題。

你知道為什么會這樣嗎？ 我的演示頁面中沒有任何css文件，所以我真的不明白。

預先感謝您的幫助！ 大衛

---

@Gal V：

我已經實現了這個“hacky解決方案”。 無論如何，謝謝你的回答！ 我在谷歌看起來更多，它似乎是safari IOS7的特定錯誤：

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

- 在iOS7中使用固定頁眉和頁腳在網頁上滾動問題

- iOS 7 iPad Safari Landscape innerHeight / outerHeight布局問題

Answer 1

iOS上的Safari瀏覽器有一個底欄 （不像chrome），它在窗口高度內計算，而它實際上不是窗口/頁面的一部分。

您需要檢測客戶端在iOS設備上使用Safari瀏覽器的情況（使用用戶代理），然后您需要將正文的高度（使用javascript）設置為$(window).height() - bar_height ，以及它應該解決你的問題。

希望有所幫助。

Answer 2

我使用這個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)";
}

Answer 3

我的解決方案是......

將其插入您的頁面：

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

代替，

$(window).height()

獲得窗戶高度，使用，

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

祝好運！