В iOS 8 удалено свойство окна просмотра «minimal-ui», есть ли другие «мягкие полноэкранные» решения?

(Это вопрос, состоящий из нескольких частей, я сделаю все возможное, чтобы суммировать сценарий.)

В настоящее время мы создаем адаптивное веб-приложение (программа чтения новостей), которое позволяет пользователям перемещаться между содержимым с вкладками, а также осуществлять вертикальную прокрутку внутри каждого содержимого с вкладками.

Распространенным подходом к проблеме является наличие оболочки, divкоторая заполняет область просмотра браузера, устанавливается overflowв hiddenили auto, а затем прокручивается горизонтально и / или вертикально внутри него.

Этот подход хорош, но имеет один главный недостаток: поскольку высота документа точно такая же, как в окне просмотра браузера, мобильный браузер не будет скрывать адресную строку / меню навигации .

Существует множество хаков и свойств окна просмотра, которые позволяют нам получить больше экранного пространства, но ни один из них не настолько эффективен, как minimal-ui(представлен в iOS 7.1).

Новости пришли вчера , что IOS 8 beta4 были удалены minimal-uiиз Mobile Safari (смотрите раздел Webkit в Notes IOS Release 8 ), который оставил нам интересно:

Q1. Можно ли еще скрыть адресную строку в Mobile Safari?

Насколько нам известно, iOS 7 больше не реагирует на window.scrollToвзлом, это говорит о том, что мы должны жить с меньшим пространством экрана, если мы не примем вертикальную компоновку или использование mobile-web-app-capable.

Q2. Возможно ли все еще иметь подобное мягкое полноэкранное впечатление?

Под мягким полноэкранным режимом я действительно имею в виду, не используя mobile-web-app-capableметатег.

Наше веб-приложение построено так, чтобы быть доступным, любая страница может быть добавлена ​​в закладки или опубликована с помощью собственного меню браузера. Добавляя, mobile-web-app-capableмы не позволяем пользователям вызывать такое меню (когда оно сохраняется на домашнем экране), которое сбивает с толку и противодействует пользователям.

minimal-uiРаньше он был средним, скрывая меню по умолчанию, но оставляя его доступным одним касанием - хотя Apple, возможно, удалила его из-за других проблем с доступностью (таких как пользователи, не знающие, где нажать, чтобы активировать меню).

Q3. Полноэкранный режим стоит хлопот?

Может показаться, что полноэкранный API не появится в iOS в ближайшее время, но даже если это так, я не вижу, как меню будет оставаться доступным (то же самое относится и к Chrome на Android).

В этом случае, возможно, нам следует просто оставить мобильное сафари без изменений и учитывать высоту области просмотра (для iPhone 5+ это 460 = 568 - 108, где 108 включает в себя панель ОС, адресную строку и меню навигации; для iPhone 4 или старше 372).

Хотелось бы услышать некоторые альтернативы (помимо создания нативного приложения).

Свойство окна просмотра минимального пользовательского интерфейса больше не поддерживается в iOS 8. Однако само минимальное пользовательское интерфейс не исчезло. Пользователь может ввести минимальный пользовательский интерфейс жестом «touch-drag-down».

Существует несколько предварительных условий и препятствий для управления состоянием просмотра, например, чтобы минимальный пользовательский интерфейс работал, должно быть достаточно контента, чтобы пользователь мог прокручивать его; для сохранения минимального пользовательского интерфейса прокрутка окна должна быть смещена при загрузке страницы и после изменения ориентации. Тем не менее, нет никакого способа вычислить размеры минимального пользовательского интерфейса с помощью screenпеременной, и, следовательно, нет способа сообщить, когда пользователь находится в минимальном пользовательском интерфейсе заранее.

Эти наблюдения являются результатом исследований в рамках разработки Brim - view manager для iOS 8 . Конечная реализация работает следующим образом:

Когда страница загрузится, Brim создаст элемент беговой дорожки. Элемент беговой дорожки используется для предоставления пользователю пространства для прокрутки. Присутствие элемента беговой дорожки гарантирует, что пользователь может войти в представление минимального пользовательского интерфейса и что оно продолжает сохраняться, если пользователь перезагрузит страницу или изменит ориентацию устройства. Это невидимо для пользователя все время. Этот элемент имеет идентификатор brim-treadmill.

После загрузки страницы или после изменения ориентации Brim использует Scream, чтобы определить, находится ли страница в режиме минимального пользовательского интерфейса (страница, которая была ранее в минимальном пользовательском интерфейсе и была перезагружена, останется в минимальном пользовательском интерфейсе, если высота содержимого больше, чем высота области просмотра).

Когда страница находится в минимальном пользовательском интерфейсе, Brim отключит прокрутку документа (он делает это безопасным способом , который не влияет на содержимое основного элемента). Отключение прокрутки документов предотвращает случайный выход из минимального пользовательского интерфейса при прокрутке вверх. Согласно оригинальной спецификации iOS 7.1, нажатие на верхнюю панель возвращает остальную часть хрома.

Конечный результат выглядит так:

Ради документации и в случае, если вы предпочитаете писать свою собственную реализацию, стоит отметить, что вы не можете использовать Scream для обнаружения, если устройство находится в минимальном пользовательском интерфейсе сразу после события ориентации изменения, потому что windowизмерения не отражают новую ориентацию до анимация вращения закончилась. Вы должны прикрепить слушателя к ориентации changeend событию.

Крик и Ориентация изменения были разработаны в рамках этого проекта.

Поскольку не существует программного способа имитации minimal-ui, мы придумали другой обходной путь, используя calc()известную высоту адресной строки iOS для нашего преимущества:

На следующей демонстрационной странице ( также доступной в gist, там есть больше технических деталей ) пользователю будет предложено выполнить прокрутку, после чего будет запущен программный полноэкранный режим (скрыть адресную строку / меню), где заголовок и содержимое заполняют новый видовой экран.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Test</title>

    <style>
        html, body {
            height: 100%;
        }

        html {
            background-color: red;
        }

        body {
            background-color: blue;
            margin: 0;
        }

        div.header {
            width: 100%;
            height: 40px;
            background-color: green;
            overflow: hidden;
        }

        div.content {
            height: 100%;
            height: calc(100% - 40px);
            width: 100%;
            background-color: purple;
            overflow: hidden;
        }

        div.cover {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            display: none;
        }

        @media screen and (width: 320px) {
            html {
                height: calc(100% + 72px);
            }

            div.cover {
                display: block;
            }
        }
    </style>
    <script>
        var timeout;

        window.addEventListener('scroll', function(ev) {

            if (timeout) {
                clearTimeout(timeout);
            }

            timeout = setTimeout(function() {

                if (window.scrollY > 0) {
                    var cover = document.querySelector('div.cover');
                    cover.style.display = 'none';
                }

            }, 200);

        });
    </script>
</head>
<body>

    <div class="header">
        <p>header</p>
    </div>
    <div class="content">
        <p>content</p>
    </div>
    <div class="cover">
        <p>scroll to soft fullscreen</p>
    </div>

</body>
</html>

Просто попрощайтесь с minimal-ui (пока)

Это так, minimal-ui может быть как полезным, так и вредным, и я полагаю, что компромисс теперь имеет другой баланс в пользу более новых, более крупных iPhone.

Я имел дело с этой проблемой, работая с моей средой js для приложений HTML5. После многих попыток решения, каждое из которых имело свои недостатки, я сдался, считая, что пространство, потерянное на iPhone раньше, чем 6. Учитывая ситуацию, я думаю, что единственное надежное и предсказуемое поведение - это предопределенное.

Короче говоря, я в конечном итоге предотвратить любую форму минимального пользовательского интерфейса , так что, по крайней мере, моя высота экрана всегда одинакова, и вы всегда знаете, какое реальное пространство у вас есть для вашего приложения.

С течением времени достаточно пользователей будет иметь больше места.

РЕДАКТИРОВАТЬ

Как я это делаю

Это немного упрощено, для демонстрации, но должно работать для вас. Предполагая, что у вас есть основной контейнер

html, body, #main {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.view {
  width: 100%;
  height: 100%;
  overflow: scroll;
}

Затем:

1. затем с помощью js я устанавливаю #mainвысоту в соответствии с доступной высотой окна. Это также помогает бороться с другими ошибками прокрутки, обнаруженными как в iOS, так и в Android. Это также означает, что вам нужно разобраться, как его обновить, просто отметьте это;

2. Я блокирую чрезмерную прокрутку при достижении границ прокрутки. Это немного более глубоко в моем коде, но я думаю, что вы также можете следовать принципу этого ответа для базовой функциональности. Я думаю, что это может немного помешать, но сделает работу.

Посмотреть демо (на iPhone)

Как примечание: это приложение также можно добавить в закладки, так как оно использует внутреннюю маршрутизацию для хеширования адресов, но я также добавил подсказку пользователям iOS для добавления в дом. Я чувствую, что таким образом помогает лояльность и возвращение посетителей (и поэтому потерянное пространство возвращается).

Самым простым способом, который я нашел, чтобы это исправить, было установить высоту элементов body и html равной 100,1% для любого запроса, где агент пользователя был iphone. Это работает только в ландшафтном режиме, но это все, что мне нужно.

html.iphone, 
html.iphone body { height: 100.1%; }

Проверьте это на https://www.360jungle.com/virtual-tour/25

Основная проблема здесь заключается в том, что iOS8-сафари не будет скрывать адресную строку при прокрутке вниз, если содержимое равно или меньше области просмотра.

Как вы уже узнали, добавление некоторого отступа внизу позволяет обойти эту проблему:

html {
    /* enough space to scroll up to get fullscreen on iOS8 */
    padding-bottom: 80px;
}

// sort of emulate safari's "bounce back to top" scroll
window.addEventListener('scroll', function(ev) {
    // avoids scrolling when the focused element is e.g. an input
    if (
        !document.activeElement
        || document.activeElement === document.body
    ) {
        document.body.scrollIntoViewIfNeeded(true);
    }
});

Вышеупомянутый css должен быть применен условно, например, с UA sniffing, добавляя gt-ios8класс к <html>.

Я хочу комментировать / частично отвечать / делиться своими мыслями. Я использую технику overflow-y: scroll для большого моего будущего проекта. Использование этого имеет два главных преимущества.

а) Вы можете использовать ящик с кнопками действий в нижней части экрана; если документ прокручивается, а нижняя панель исчезает, нажатие кнопки, расположенной в нижней части экрана, сначала приводит к появлению нижней панели, а затем к нажатию. Кроме того, то, как эта штука работает, вызывает проблемы с модалами, у которых кнопки расположены в самом низу.

б) При использовании переполненного элемента, единственные вещи, которые перекрашиваются в случае значительных изменений CSS, это те, которые отображаются на экране. Это дало мне огромный прирост производительности при использовании javascript для изменения CSS нескольких элементов на лету. Например, если у вас есть список из 20 элементов, которые необходимо перекрасить, и только два из них отображаются на экране в переполненном элементе, перекрашиваются только те, в то время как остальные перекрашиваются при прокрутке. Без этого все 20 элементов перекрашиваются.

... конечно, это зависит от проекта, и если вам нужна какая-либо из функций, которые я упомянул. Google использует переполненные элементы для Gmail, чтобы использовать функции, которые я описал на а). Имо, это того стоит, даже учитывая небольшую высоту в старых iPhone (372px, как вы сказали).

Это возможно, используя что-то вроде приведенного ниже примера, который я собрал с помощью работы из ( https://gist.github.com/bitinn/1700068a276fb29740a7 ), которая не совсем работала на iOS 11:

Вот модифицированный код, который работает на iOS 11.03, пожалуйста, прокомментируйте, работал ли он для вас.

Ключ добавляет некоторый размер к BODY, чтобы браузер мог прокручивать, например: height: calc (100% + 40px);

Полный образец ниже и ссылка для просмотра в вашем браузере (пожалуйста, проверьте!)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeHots iOS WebApp Minimal UI via Scroll Test</title>

    <style>
        html, body {
            height: 100%;
        }
        html {
            background-color: red;
        }
        body {
            background-color: blue;
            /* important to allow page to scroll */
            height: calc(100% + 40px);
            margin: 0;
        }
        div.header {
            width: 100%;
            height: 40px;
            background-color: green;
            overflow: hidden;
        }
        div.content {
            height: 100%;
            height: calc(100% - 40px);
            width: 100%;
            background-color: purple;
            overflow: hidden;
        }
        div.cover {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            display: none;
        }
        @media screen and (width: 320px) {
            html {
                height: calc(100% + 72px);
            }
            div.cover {
                display: block;
            }
        }
    </style>
    <script>
        var timeout;

        function interceptTouchMove(){
            // and disable the touchmove features 
            window.addEventListener("touchmove", (event)=>{
                if (!event.target.classList.contains('scrollable')) {
                    // no more scrolling
                    event.preventDefault();
                }
            }, false); 
        }

        function scrollDetect(event){
            // wait for the result to settle
            if( timeout ) clearTimeout(timeout);

            timeout = setTimeout(function() {
                console.log( 'scrolled up detected..' );
                if (window.scrollY > 35) {
                    console.log( ' .. moved up enough to go into minimal UI mode. cover off and locking touchmove!');
                    // hide the fixed scroll-cover
                    var cover = document.querySelector('div.cover');
                    cover.style.display = 'none';

                    // push back down to designated start-point. (as it sometimes overscrolls (this is jQuery implementation I used))
                    window.scrollY = 40;

                    // and disable the touchmove features 
                    interceptTouchMove();

                    // turn off scroll checker
                    window.removeEventListener('scroll', scrollDetect );                
                }
            }, 200);            
        }

        // listen to scroll to know when in minimal-ui mode.
        window.addEventListener('scroll', scrollDetect, false );
    </script>
</head>
<body>

    <div class="header">
        <p>header zone</p>
    </div>
    <div class="content">
        <p>content</p>
    </div>
    <div class="cover">
        <p>scroll to soft fullscreen</p>
    </div>

</body>

Полный пример ссылки здесь: https://repos.codehot.tech/misc/ios-webapp-example2.html

Веб-приложение, работающее в полноэкранном режиме на iOS и Android, можно запустить в полноэкранном режиме, оно называется PWA, и после тяжелой работы это был единственный способ обойти эту проблему.

PWA открывают ряд интересных вариантов для развития, которые нельзя упускать. Я уже сделал пару, ознакомьтесь с этим Руководством для дизайнеров по государственным и частным тендерам (на испанском языке). А вот английское объяснение с сайта CosmicJS

Я не занимался веб-дизайном для iOS, но, насколько я помню, в сеансах WWDC и в документации панель поиска в Mobile Safari и панели навигации по ОС теперь автоматически изменяют размеры и уменьшаются, чтобы показать больше вашего контента.

Вы можете проверить это в Safari на iPhone и заметить, что при прокрутке вниз, чтобы увидеть больше содержимого на странице, панель навигации / поиска автоматически скрывается.

Возможно, лучше оставить адресную строку / панель навигации без изменений и не создавать полноэкранный режим. Я не вижу, чтобы Apple делала это в ближайшее время. И самое большее, они не контролируют автоматически, когда адресная строка показывает / скрывает.

Конечно, вы теряете экранную недвижимость, особенно на iPhone 4 или 4S, но, похоже, нет альтернативы бета-версии 4.