使用Chrome mobile的自動隱藏工具欄和全高div來獲取Jankiness

Question

我有一個div調整大小，在load和resize處於視口的整個高度。 我遇到的問題是在Google Chrome for iOS上（我沒有檢查Android，但我可以想象它會顯示相同的不穩定行為）如果我向下滾動，就像往常一樣地址/標簽欄向上滾動。 就像它一樣，它會觸發resize事件。 當發生這種情況時， div及其內容抖動並導致滾動變得緩慢，以及導致下面div其他奇怪現象。

JSFiddle： http ： //jsfiddle.net/mseymour/9PEC4/

Answer 1

我建議只在智能手機上設置.home-hero的高度一次 ，通過檢查窗口的高度（可能導致問題，這是不穩定的）或用戶代理嗅探。

以下是一些鏈接：
http://detectmobilebrowsers.com/
在jQuery中檢測移動設備的最佳方法是什么？
檢測移動瀏覽器

然后只設置一次高度，因為在移動設備上你無法真正調整窗口大小，並且你不需要在每次調整大小事件時調整它的大小。

if (isMobile) {
    fullScreenSlide(); // resize once
} else {
   setResizeEvent(); // Set the event for multiple resizes
}

function setResizeEvent() {
    $(window).on("resize", function () {
        fullScreenSlide();
    }).resize();    
}

function fullScreenSlide () {
  var browserheight = Math.round($(window).height());
  $('.home-hero').height(browserheight);
}

你想在智能手機上做一些“小事”，因為與桌面相比，智能手機的性能非常低