iOS 8 видалено властивість огляду "minimal-ui", чи існують інші рішення з "повного екрана"?

(Це запитання на багато частин. Я постараюся зробити все можливе, щоб узагальнити сценарій.)

Наразі ми будуємо чуйний веб-додаток (читач новин), який дозволяє користувачам переходити між вмістом на вкладках, а також прокручувати вертикально всередині кожного вмісту вкладок.

Поширений підхід до проблеми полягає в тому, щоб мати обгортку, divяка заповнює вікно перегляду браузера, встановити overflowна hiddenабо auto, а потім прокрутити горизонтально та / або вертикально всередині нього.

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

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

Учора з'явилася новина, що iOS 8 beta4 видалено minimal-uiз мобільного Safari (див. Розділ Webkit у примітках до випуску iOS 8 ), і нам залишилось цікаво:

Q1. Чи все ще можливо приховати адресний рядок на мобільному 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).

Хочеться почути деякі варіанти (окрім створення нативного додатка).

Властивість поля перегляду мінімального ui більше не підтримується в iOS 8. Однак сам мінімальний ui не зник. Користувач може ввести мінімальний інтерфейс користувачем жестом "перетягування вниз".

Існує декілька попередніх умов і перешкод для керування станом перегляду, наприклад, для мінімальної роботи користувача, має бути достатньо вмісту, щоб користувач міг прокручувати; щоб мінімальний інтерфейс зберігався, прокрутка вікна повинна бути зміщена під час завантаження сторінки та після зміни орієнтації. Однак, немає можливості обчислити розміри мінімального ui, використовуючи screenзмінну, і, таким чином, немає способу повідомити, коли користувач знаходиться в мінімальному ui заздалегідь.

Ці спостереження є результатом досліджень в рамках розробки менеджера перегляду Brim для iOS 8 . Кінцева реалізація працює наступним чином:

Коли сторінка завантажується, Brim створить елемент бігової доріжки. Елемент бігової доріжки використовується, щоб дати користувачеві простір для прокрутки. Наявність елемента бігової доріжки гарантує користувачеві можливість перейти до перегляду мінімальної інтерфейсу, і він продовжує зберігатися, якщо користувач перезавантажує сторінку або зміни орієнтації пристрою. Він невидимий для користувача весь час. Цей елемент має ідентифікатор brim-treadmill.

Завантажуючи сторінку або після зміни орієнтації, Brim використовує Scream, щоб визначити, чи стоїть перегляд у мінімальному інтерфейсі (сторінка, яка раніше була мінімальною, і перезавантажена, залишиться мінімальною, якщо висота вмісту становить більша за висоту вікна перегляду).

Коли сторінка знаходиться на мінімальному рівні, Brim відключить прокручування документа (це робить безпечним способом , який не впливає на вміст основного елемента). Вимкнення прокрутки документів запобігає випадковому виходу з мінімального інтерфейсу під час прокрутки вгору. Відповідно до оригінальної специфікації iOS 7.1, натискання на верхню панель повертає решту хрому.

Кінцевий результат виглядає приблизно так:

Для документації, і якщо ви віддаєте перевагу написати власну реалізацію, варто відзначити, що ви не можете використовувати Scream, щоб виявити, чи пристрій знаходиться в мінімальному рівні відразу після події зміни орієнтації, оскільки windowрозміри не відображають нову орієнтацію до моменту ротаційна анімація закінчилася. Ви повинні приєднати слухача до події орієнтаціїзміни та події.

Крик та орієнтаціязміни були розроблені в рамках цього проекту.

Оскільки не існує програмного способу наслідування minimal-ui, ми придумали інше рішення, використовуючи calc()і нашу відому висоту адресного рядка iOS на нашу користь:

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

<!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>

Просто попрощайтеся з мінімальним ui (поки що)

Це правда, minimal-ui може бути як корисною, так і шкідливою, і я вважаю, що зараз у компромісу є інший баланс на користь нових, більших iPhone.

Я вирішував цю проблему під час роботи з моєю js-рамкою для програм HTML5. Після багатьох спроб рішення, кожне зі своїми недоліками, я здався, вважаючи, що простір, втрачений на айфонах раніше, ніж 6. Враховуючи ситуацію, я думаю, що єдине тверде та передбачуване поведінка - це заздалегідь визначене.

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

За допомогою часу достатньо користувачів матиме більше місця.

EDIT

Як я це роблю

Це трохи спрощено, для демонстраційних цілей, але повинно працювати для вас. Якщо припустити, що у вас є основний контейнер

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

Тоді:

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

2. Я блокую надмірну прокрутку при досягненні меж прокрутки. Це трохи глибше в моєму коді, але я думаю, що ви також можете дотримуватися принципу цієї відповіді для основної функціональності. Я думаю, це могло б трохи заграти, але зробить роботу.

Переглянути демонстраційну версію (на iPhone)

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

Найпростіший спосіб, який я знайшов, щоб це виправити, - встановити висоту корпусу та html-елементів на 100,1% для будь-якого запиту, де агентом користувача був айфон. Це працює лише в ландшафтному режимі, але це все, що мені потрібно.

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

Перевірте це за адресою https://www.360jungle.com/virtual-tour/25

Основна проблема тут здається, що safari 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 нюхування, додаючи gt-ios8клас до <html>.

Я хочу прокоментувати / частково відповісти / поділитися своїми думками. Я використовую техніку overflow-y: scroll для великого майбутнього мого проекту. Використання його має дві ОСНОВНІ переваги.

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

b) При використанні перекинутого елемента єдине, що перефарбовується у разі значних змін css, - це ті, що переглядаються на екрані. Це дало мені величезне підвищення продуктивності при використанні javascript для зміни css декількох елементів на льоту. Наприклад, якщо у вас є список з 20 елементів, які вам потрібно перефарбувати, і лише два з них перебувають на екрані в перекинутому елементі, лише ті перефарбовуються, а решта перефарбовуються під час прокрутки. Без цього всі 20 елементів перефарбовуються.

.. звичайно, це залежить від проекту і якщо вам потрібен якийсь із функцій, про які я згадав. Google використовує перекинуті елементи для gmail, щоб використовувати функціонал, описаний у a). Імо, варто того часу, навіть враховуючи невеликий зріст у старих iphone (372 пікселів, як ви сказали).

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

Ось модифікований код, який працює на iOS 11.03, будь ласка, коментуйте, чи працював він для вас.

Ключ додає деякий розмір BODY, щоб браузер міг прокручуватися, наприклад: висота: 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 та в документації, панель пошуку в мобільному Safari та навігаційні панелі в ОС тепер автоматично змінить розмір і зменшиться, щоб показати більше вашого вмісту.

Ви можете перевірити це в Safari на iPhone і помітити, що при прокручуванні вниз, щоб побачити більше вмісту на сторінці, панель навігації / пошуку автоматично приховується.

Можливо, найкраще залишати адресний рядок / панель навігації, а не створювати повний екран. Я не бачу, щоб Apple це зробила незабаром. І в кращому випадку вони не контролюють автоматично, коли адресний рядок відображається / ховається.

Звичайно, ви втрачаєте нерухомість на екрані, особливо на iPhone 4 або 4S, але альтернативи Beta 4, здається, не існує.