使用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);
}

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