iOS 8 ha rimosso la proprietà viewport "minimal-ui", ci sono altre soluzioni "soft fullscreen"?

(Questa è una domanda in più parti, farò del mio meglio per riassumere lo scenario.)

Attualmente stiamo costruendo un'app Web reattiva (lettore di notizie) che consente agli utenti di scorrere tra i contenuti a schede, nonché di scorrere verticalmente all'interno di ciascun contenuto a schede.

Un approccio comune al problema è disporre di un wrapper divche riempia la finestra del browser, sia impostato overflowsu hiddeno auto, quindi scorra orizzontalmente e / o verticalmente al suo interno.

Questo approccio è eccezionale ma presenta uno svantaggio principale: poiché l'altezza del documento è esattamente la stessa della vista del browser, il browser per dispositivi mobili non nasconderà la barra degli indirizzi / il menu di navigazione .

Esistono numerosi hack e proprietà viewport che ci consentono di ottenere più spazio sullo schermo, ma nessuno è altrettanto efficace minimal-ui(introdotto in iOS 7.1).

Ieri è arrivata la notizia che iOS 8 beta4 era stato rimosso minimal-uida Mobile Safari (vedi la sezione Webkit nelle Note di rilascio di iOS 8 ), che ci ha lasciato meravigliati:

Q1. È ancora possibile nascondere la barra degli indirizzi su Mobile Safari?

Per quanto ne sappiamo, iOS 7 non risponde più al window.scrollTotrucco, questo suggerisce dobbiamo vivere con lo spazio dello schermo più piccolo, a meno che non si adotta un layout verticale o l'uso mobile-web-app-capable.

Q2. È ancora possibile avere un'esperienza soft a schermo intero simile?

Per schermo intero morbido intendo davvero senza usare il mobile-web-app-capablemeta tag.

La nostra app Web è progettata per essere accessibile, qualsiasi pagina può essere aggiunta ai segnalibri o condivisa utilizzando il menu del browser nativo. Aggiungendo mobile-web-app-capableimpediamo agli utenti di invocare tale menu (quando viene salvato nella schermata iniziale), il che confonde e contrappone gli utenti.

minimal-uiera la via di mezzo, nascondendo il menu per impostazione predefinita ma mantenendolo accessibile con un tocco , anche se Apple potrebbe averlo rimosso a causa di altri problemi di accessibilità (come gli utenti che non sanno dove toccare per attivare il menu).

Q3. Un'esperienza a schermo intero vale la pena?

Sembrerebbe che un'API a schermo intero non arriverà presto su iOS, ma anche se lo è, non vedo come il menu sarà accessibile (lo stesso vale per Chrome su Android).

In questo caso, forse dovremmo semplicemente lasciare Safari mobile così com'è e tenere conto dell'altezza della finestra (per iPhone 5+, è 460 = 568 - 108, dove 108 include la barra del sistema operativo, la barra degli indirizzi e il menu di navigazione; per iPhone 4 o più vecchio, è 372).

Mi piacerebbe sentire alcune alternative (oltre a creare un'app nativa).

La proprietà viewport minimal-ui non è più supportata in iOS 8. Tuttavia, lo stesso minimal-ui non è più disattivato. L'utente può accedere al minimal-ui con un gesto di "trascinamento verso il basso".

Esistono diverse condizioni preliminari e ostacoli per gestire lo stato di visualizzazione, ad es. Per far funzionare minimal-ui, è necessario disporre di contenuti sufficienti per consentire all'utente di scorrere; affinché persista minimal-ui, lo scorrimento della finestra deve essere sfalsato al caricamento della pagina e dopo il cambio di orientamento. Tuttavia, non c'è modo di calcolare le dimensioni del minimal-ui usando la screenvariabile, e quindi non c'è modo di dire in anticipo quando l'utente è nel minimal-ui.

Queste osservazioni sono il risultato della ricerca nell'ambito dello sviluppo di Brim - view manager per iOS 8 . L'implementazione finale funziona nel modo seguente:

Quando la pagina viene caricata, Brim creerà un elemento tapis roulant. L'elemento tapis roulant viene utilizzato per dare spazio all'utente per scorrere. La presenza dell'elemento del tapis roulant assicura che l'utente possa accedere alla vista minimal-ui e che continui a persistere se l'utente ricarica la pagina o cambia l'orientamento del dispositivo. È invisibile all'utente per tutto il tempo. Questo elemento ha un ID brim-treadmill.

Al caricamento della pagina o dopo aver modificato l'orientamento, Brim sta usando Scream per rilevare se la pagina è nella vista minimal-ui (la pagina che è stata precedentemente in minimal-ui ed è stata ricaricata rimarrà nella minimal-ui se l'altezza del contenuto è maggiore dell'altezza del viewport).

Quando la pagina è in minimal-ui, Brim disabiliterà lo scorrimento del documento (lo fa in modo sicuro e non influisce sul contenuto dell'elemento principale). La disabilitazione dello scorrimento dei documenti impedisce di lasciare accidentalmente l'interfaccia utente minima durante lo scorrimento verso l'alto. Secondo le specifiche originali di iOS 7.1, toccando la barra superiore si riporta il resto del Chrome.

Il risultato finale è simile al seguente:

Per motivi di documentazione, e nel caso in cui si preferisca scrivere la propria implementazione, vale la pena notare che non è possibile utilizzare Scream per rilevare se il dispositivo è in minimal-ui subito dopo l' evento di cambio orientamento perché le windowdimensioni non riflettono il nuovo orientamento fino a quando il l'animazione di rotazione è terminata. Devi associare un ascoltatore all'evento orientchangeend .

Urlare e cambiare orientamento sono stati sviluppati nell'ambito di questo progetto.

Dal momento che non esiste un modo programmatico per imitare minimal-ui, abbiamo trovato una soluzione alternativa diversa, utilizzando calc()e conoscendo l'altezza della barra degli indirizzi iOS a nostro vantaggio:

La seguente pagina demo ( disponibile anche in sintesi, maggiori dettagli tecnici lì ) chiederà all'utente di scorrere, il quale innesca una schermata a schermo intero (nascondi barra degli indirizzi / menu), dove intestazione e contenuto riempiono la nuova finestra.

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

Dì solo addio a minimal-ui (per ora)

È vero, minimal-uipotrebbe essere utile e dannoso, e suppongo che il compromesso abbia ora un altro equilibrio, a favore di iPhone più nuovi e più grandi.

Ho affrontato il problema mentre lavoravo con il mio framework js per le app HTML5. Dopo molte tentate soluzioni, ognuna con i suoi inconvenienti, mi sono arreso a considerare che lo spazio perso su iPhone precedente a 6. Data la situazione, penso che l'unico comportamento solido e prevedibile sia predeterminato.

In breve, ho finito per prevenire qualsiasi forma di minimal-ui , quindi almeno la mia altezza dello schermo è sempre la stessa e sai sempre quale spazio reale hai per la tua app.

Con l'aiuto del tempo, abbastanza utenti avranno più spazio.

MODIFICARE

Come lo faccio

Questo è un po 'semplificato, a scopo dimostrativo, ma dovrebbe funzionare per te. Supponendo di avere un contenitore principale

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

Poi:

1. quindi con js, ho impostato #mainl'altezza sull'altezza disponibile della finestra. Questo aiuta anche a gestire altri bug di scorrimento presenti in iOS e Android. Significa anche che devi occuparti di come aggiornarlo, basta notare che;

2. Blocco lo scorrimento eccessivo quando si raggiungono i limiti dello scorrimento. Questo è un po 'più profondo nel mio codice, ma penso che tu possa anche seguire il principio di questa risposta per funzionalità di base. Penso che potrebbe flickr un po ', ma farà il lavoro.

Guarda la demo (su un iPhone)

Come sidenote: anche questa app è un segnalibro, in quanto utilizza un routing interno agli indirizzi con hash, ma ho anche aggiunto un prompt agli utenti iOS da aggiungere a casa. Penso che in questo modo aiuti la lealtà e il ritorno dei visitatori (e quindi lo spazio perso è tornato).

Il modo più semplice che ho trovato per risolvere questo problema era impostare l'altezza del corpo e gli elementi html al 100,1% per qualsiasi richiesta in cui l'agente utente fosse un iphone. Funziona solo in modalità orizzontale, ma è tutto ciò di cui avevo bisogno.

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

Dai un'occhiata a https://www.360jungle.com/virtual-tour/25

Il problema alla radice qui sembra che iOS8 Safari non nasconderà la barra degli indirizzi quando si scorre verso il basso se il contenuto è uguale o inferiore alla finestra.

Come hai già scoperto, l'aggiunta di alcune imbottiture in basso risolve questo problema:

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);
    }
});

Il CSS sopra deve essere applicato in modo condizionale, ad esempio con UA ​​sniffing che aggiunge una gt-ios8classe a <html>.

Voglio commentare / rispondere parzialmente / condividere i miei pensieri. Sto usando la tecnica di overflow-y: scroll per un mio grande progetto imminente. Usarlo ha due vantaggi PRINCIPALI.

a) È possibile utilizzare un cassetto con i pulsanti di azione nella parte inferiore dello schermo; se il documento scorre e la barra in basso scompare, toccando un pulsante situato nella parte inferiore dello schermo apparirà prima la barra in basso, quindi sarà cliccabile. Inoltre, il modo in cui funziona questa cosa, causa problemi con i modali che hanno pulsanti in fondo.

b) Quando si utilizza un elemento overflow, le uniche cose che vengono ridipinte in caso di importanti cambiamenti CSS sono quelle nella schermata visualizzabile. Questo mi ha dato un enorme aumento delle prestazioni quando si utilizza JavaScript per modificare al volo css di più elementi. Ad esempio, se si dispone di un elenco di 20 elementi che è necessario riverniciare e solo due di essi sono sullo schermo nell'elemento overflow, solo quelli vengono riverniciati mentre il resto viene riverniciato durante lo scorrimento. Senza di essa tutti i 20 elementi vengono ridipinti.

... ovviamente dipende dal progetto e se hai bisogno di una delle funzionalità che ho citato. Google utilizza elementi overflow per Gmail per utilizzare la funzionalità che ho descritto in a). Imo, ne vale la pena, anche considerando la piccola altezza negli iPhone più vecchi (372px come hai detto).

È possibile, usando qualcosa come l'esempio di seguito che ho messo insieme con l'aiuto del lavoro da ( https://gist.github.com/bitinn/1700068a276fb29740a7 ) che non ha funzionato su iOS 11:

Ecco il codice modificato che funziona su iOS 11.03, per favore commenta se ha funzionato per te.

La chiave sta aggiungendo alcune dimensioni a BODY in modo che il browser possa scorrere, ad esempio: height: calc (100% + 40px);

Esempio completo di seguito e collegamento per visualizzarlo nel browser (si prega di testare!)

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

Link di esempio completo qui: https://repos.codehot.tech/misc/ios-webapp-example2.html

È possibile ottenere un'applicazione Web in esecuzione a schermo intero sia su iOS che su Android, si chiama PWA e dopo un duro lavoro di mucha, è stato l'unico modo per aggirare questo problema.

Le PWA aprono una serie di opzioni interessanti per lo sviluppo da non perdere. Ne ho già fatti un paio, dai un'occhiata a questo manuale di gara pubblico e privato per designer (spagnolo). Ed ecco una spiegazione in inglese dal sito CosmicJS

Non ho fatto web design per iOS ma da quello che ricordo di aver visto nelle sessioni del WWDC e nella documentazione, la barra di ricerca in Safari mobile e le barre di navigazione nel sistema operativo, ora ridimensioneranno e si ridurranno automaticamente per mostrare più contenuti.

Puoi testarlo in Safari su un iPhone e notare che, quando scorri verso il basso per vedere più contenuti in una pagina, la barra di navigazione / ricerca viene nascosta automaticamente.

Forse lasciare la barra degli indirizzi / barra di navigazione così com'è, e non creare un'esperienza a schermo intero, è la cosa migliore. Non vedo Apple farlo presto. E al massimo non si controllano automaticamente quando la barra degli indirizzi mostra / nasconde.

Certo, stai perdendo spazio sullo schermo, specialmente su un iPhone 4 o 4S, ma non sembra esserci un'alternativa a partire da Beta 4.