Jankiness с панелью инструментов Chrome Mobile и скрытой панелью

Question

Jankiness с панелью инструментов Chrome Mobile и скрытой панелью

0

У меня есть div, размер которого изменяется на полную высоту области просмотра при load а также при resize. Проблема, с которой я сталкиваюсь, заключается в том, что в Google Chrome для iOS (я не проверял Android, но могу представить, что он отображает те же самые неустойчивые поведения), если я прокручу вниз, как обычно, прокручивается панель адресов/вкладок. И как это происходит, он запускает события resize. Когда это произойдет, div и его содержимое дрожат и вызывают зависание прокрутки, а также вызывают другие странности с div ниже.

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

Mark 04 апр. 2014, в 07:38

Источник

Теги:

javascript

jquery

html

css

mobile

1 ответ

Ещё вопросы

Rick Lancee · Accepted Answer · 2014-04-04T03-36-00.000Z

Я бы предложил установить высоту .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);
}

Вы хотите делать как можно меньше "вещей" на смартфоне, поскольку смартфоны действительно медленны по производительности по сравнению с настольным компьютером