Предотвратить отображение Mobile Safari при представлении панели инструментов, когда дно окна просмотра нажато

У нас есть простое мобильное приложение, работающее в Mobile Safari (MS) на iOS. Когда пользователь прокручивает страницы n пикселей, верхняя кнопка "снижается" снизу. Верхняя кнопка - фиксированное положение. Проблема в том, что при запуске прокрутки в MS скрывается интерфейс навигации и панели инструментов. Когда вы нажимаете "верхнюю" кнопку, она показывает нижнюю панель инструментов, а второй нажмите, чтобы нажать "верхнюю" кнопку. Есть ли способ отключить по умолчанию "коснуться нижней части окна просмотра, чтобы выявить поведение панели инструментов", поэтому наша верхняя кнопка работает так, как ожидалось (т.е. Прыгает в верхнюю часть страницы одним щелчком, а не двумя?

Ответ 1

Нет, нет. Вы можете контролировать содержимое своей веб-страницы, но не поведение приложения Safari.

Ответ 2

Для iOS 7.1 вы можете установить это в своем заголовке, чтобы свести к минимуму пользовательский интерфейс:

<meta name="viewport" content="width=device-width, minimal-ui">

Он был представлен в iOS 7.1 beta 2. Этот сайт помог мне понять, как работает минимальный ui: http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs

Ответ 3

Простым решением здесь является добавление около 50px padding-bottom на ваш нижний div. Кажется, что Safari думает, что вы пытаетесь получить доступ к нижней навигационной панели, если вы не нажмете значительно выше нижней области. С дополнительным дополнением внизу пользователь будет нажимать намного больше на странице (не всегда, но в целом).

Ответ 4

Mika и typeoneerror верны, но есть обходное решение.

Лучшее решение для решения проблемы, которое я нашел (которое не требует minimal-ui), - заставить навигацию iOS Safari оставаться всегда открытой/видимой. Таким образом, щелчки в нижней части окна никогда не открывают нижнюю навигацию, так как она всегда открывается.

Для этого вам просто нужно применить CSS и браузерный таргетинг с помощью JS. Подробные инструкции о том, как:

Ответ 5

Вот как я с этим справляюсь. С position:fixed;bottom:0 моя position:fixed;bottom:0 панель инструментов position:fixed;bottom:0, я добавляю к нему смещение в 44 пикселя (с полупрозрачной буферной зоной) вскоре после того, как панель инструментов сафари скрыта (так как это сценарий, когда касание внизу покажет панель инструментов снова).

var min_inner_height = false;
var max_inner_height = false;

var passiveIfSupported = false;
try {
    window.addEventListener("test", null, Object.defineProperty({}, "passive", { get: 
function() { passiveIfSupported = { passive: true }; } }));
} catch(err) {}


document.addEventListener('scroll', function(e) {
    var win_inner_h = window.innerHeight;
    if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
        if (min_inner_height === false || win_inner_h < min_inner_height) {
            min_inner_height = win_inner_h;
        }
        if ((max_inner_height === false || win_inner_h > max_inner_height) && win_inner_h > min_inner_height) {
            max_inner_height = win_inner_h;
        }
        if (max_inner_height !== false && max_inner_height == win_inner_h) {
            addElementClass(document.body, 'safari-toolbars-hidden');
        } else {
            removeElementClass(document.body, 'safari-toolbars-hidden');
        }
    }
}, passiveIfSupported);

Это в основном добавляет .safari-toolbars-hidden к .safari-toolbars-hidden <body> когда он исчезает из-за прокрутки пользователем страницы вниз. На этом этапе я перемещаю свою собственную панель инструментов вверх по странице:

.my-bottom-toolbar { position: fixed; bottom: 0px; }

@supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */
    .my-bottom-toolbar { transition: bottom 0.15s ease-in-out; box-shadow: 0 44px 0 rgba(255, 255, 255, 0.8); }
    .safari-toolbars-hidden .my-bottom-toolbar { bottom: 44px;  }
}

Надеюсь, это поможет кому-то! Вместо смещения еще на 44 пикселя, вы также можете добавить дополнительные 44 пикселя нижнего отступа, если это работает лучше для вашего случая.