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


191

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

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

Распространенным подходом к проблеме является наличие оболочки, 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).

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


см. stackoverflow.com/questions/18793072/… для получения более подробной информации о том, почему minimal-ui может иметь решающее значение для некоторых приложений.
bitinn

1
Я столкнулся с той же проблемой на iOS 7, когда мы собирались создать веб-приложение с событиями прокрутки / прокрутки, но проверил события на Scroll на iOS8 Beta 4 и ... они работают. ios8-scroll-events.heroku.com Не уверен, поможет ли это вообще, но .. у вас есть то, что вам нужно.
Девин Макиннис

Столкнулся с той же проблемой. На данный момент только javascript "исправить", так как функция calc () ниже является единственным ответом. Пожалуйста, держите эту ветку обновленной, если вы знаете лучшее решение. С уважением.
A1exandr

Ответы:


86

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

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

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

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

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

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

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

Брим в iOS симуляторе.

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

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


3
Это намного больше, чем мой первоначальный ответ, помеченный как новый ответ, пока не придет еще лучшее решение :)
bitinn

4
Кажется, хорошо! Могу ли я заставить минимальный пользовательский интерфейс без начального прокрутки?
INT

50
Это действительно бесконечная история. Я разработчик игр на HTML, а minimal-ui в iOS 7.1 работал просто отлично - это был единственный способ, чтобы приложение работало в полноэкранном режиме и в то же время могло касаться нижней части экрана. Решения с перелистыванием страниц хороши, но недостаточно хороши :( Apple, нам нужна правильная реализация полноэкранного API для игр, пожалуйста.
Петр Урбан,

4
@Petr: я не мог согласиться больше. Когда это исправление было объявлено в 7.1, мы быстро развернули новый процесс покупки, который закрепил основной CTA в нижней части экрана. Это сработало и преобразилось великолепно! Это было очень "родным" и цельным. Который я думаю, это точная проблема. Если вы думаете об этом, то не в интересах Apple, чтобы веб-приложения чувствовали себя нативными. На самом деле это прямой конфликт интересов с их монополией в App Store. Это, IMO, единственная действительная причина, почему особенность, которая имеет такой большой смысл, была исправлена, а затем намеренно удалена. # my2Cents :)
Хосе Браун

2
@PetrUrban Я убежден, что Apple предпочла бы, чтобы вы опубликовали свою игру в качестве приложения для телефонного промежутка, а не позволяли работать через Интернет. Их недавнее решение разрешить блокировку рекламы для сафари закрепляет эту идею.
Патрик Гандерсон

20

Поскольку не существует программного способа имитации 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>

10

Просто попрощайтесь с 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 для добавления в дом. Я чувствую, что таким образом помогает лояльность и возвращение посетителей (и поэтому потерянное пространство возвращается).


Отключить minimal-UI мне кажется очень разумным. Пожалуйста, включите краткое описание, как это сделать!
Иштван Палинкас

Вы правы, я добавил немного с практическими рекомендациями. Многие другие способы будут работать.
Франческо Фраппорти

1
Твоя демонстрация не работает на iOS8, согласно моему iPhone 5.
dmr07

Спасибо, что сообщили мне, это должно быть какое-то обновление, потому что раньше работало. Вы в сафари? Что вы имеете в виду именно с этим не работает?
Франческо Фраппорти

7

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

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

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


Спасибо @Stephen. Рост: 100,1% помогли мне. Однако, когда я открыл 360jungle.com/virtual-tour/25 на iPhone (iOS 11.1.1) Safari и щелкнул кнопки внизу, появилась адрес и панель инструментов. Это потому, что кнопки расположены слишком близко к концу дисплея. Я думаю, было бы лучше переместить их в другое место в мобильном режиме.
Тева

2

Основная проблема здесь заключается в том, что 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>.


1
Что именно делает этот JS?
Бен Синклер,

Если вы имеете в виду scrollIntoViewIfNeeded, это нестандартное происхождение scrollIntoView( developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView ). Как следует из названия, метод прокручивает элемент в представление. trueПараметр говорит, чтобы выровнять вид с верхом элемента. Это по сути должно помешать вам прокручивать. Реализация, однако, несовершенна.
Gajus

1

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

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

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

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


1

Это возможно, используя что-то вроде приведенного ниже примера, который я собрал с помощью работы из ( 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


1

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

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


-3

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

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

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

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


1
Я знал эту функцию iOS7 +, но см. Мое объяснение выше: поскольку высота документа точно такая же, как в окне просмотра браузера, мобильный браузер не будет скрывать адресную строку / меню навигации , поскольку прокрутка на уровне документа не выполняется.
bitinn

1
Это может быть чем-то вроде ограничения теперь, когда бета-версия 4 убрала эту функцию. Вполне возможно, что Apple автоматически контролирует адресную строку и не дает разработчикам доступа к ней.
iFeli

8
I haven't done web design for iOS- если вы занимаетесь веб-дизайном, вы делаете это для любой платформы. Потому что Интернет есть на каждой платформе.
Задачи

4
@Sumit Я знаю, что работа в Интернете универсальна, но каждый браузер и его базовые структуры имеют определенные атрибуты CSS. Таким образом, Chrome может иметь некоторые атрибуты, недоступные для Safari, FireFox и наоборот.
iFeli
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.