Question

我的div已调整大小，位于load以及resize上视口的整个高度。我遇到的问题是谷歌Chrome for iOS（我还没有检查Android，但我可以想象它会显示相同的不稳定行为）如果我向下滚动，像往常一样地址/标签栏向上滚动。就像它一样，它会触发resize个事件。当发生这种情况时，div及其内容会抖动并导致滚动变得缓慢，并导致下面div的其他奇怪现象。

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

Answer 1

我建议在智能手机上设置.home-hero仅一次的高度，方法是检查窗口的高度（可能会导致问题，它会出现问题）不定的）或用户代理嗅探。

以下是一些链接：
http://detectmobilebrowsers.com/
What is the best way to detect a mobile device in jQuery?
Detecting a mobile browser

然后只设置一次高度，因为在手机上你无法真正调整窗口大小，并且你不需要在每次调整大小事件时调整它的大小。

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

你想做的事情很少＆＃34;事情＆＃34;在智能手机上，因为与桌面相比，智能手机的性能确实很慢

使用Chrome mobile的自动隐藏工具栏和全高div来获取Jankiness

1 个答案: