it-swarm.com.ru

Запретить Mobile Safari при отображении панели инструментов при нажатии на нижнюю часть области просмотра

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

28
typeoneerror

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

16
Mika

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

6
Rowan Gontier

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

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

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

6
Mr. T

Мика и typeoneerror верны, но есть обходной путь.

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

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

4
jennz0r

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

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 к <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 пикселя для нижнего отступа, если это будет лучше для вашего случая.

0
EoghanM