iOS 8 supprimé la propriété viewport « minime-ui », y a-t-il des autres solutions de « doux plein écran » ?

Question

(C'est un multi-partie de la question, je vais essayer de mon mieux pour résumer le scénario.)

Nous sommes actuellement à la construction d'un responsive web app (lecteur de nouvelles) qui permettent aux utilisateurs de glisser entre les onglets de contenu, ainsi que de faire défiler verticalement à l'intérieur de chacun des onglets de contenu.

Une approche commune du problème est un wrapper div qui remplit le navigateur de la fenêtre d'affichage, définissez overflow de hidden ou auto, puis faites défiler l'écran horizontalement et/ou verticalement à l'intérieur.

Cette approche est bien, mais il a un inconvénient principal: depuis la hauteur du document est exactement la même que la fenêtre d'affichage du navigateur, le navigateur mobile ne sera pas cacher la barre d'adresse/menu de navigation.

Il existe de nombreux hacks et les propriétés du point de vue qui nous permettent d'obtenir plus d'espace à l'écran, mais aucun n'est aussi efficace que l' minimal-ui (introduit dans l'iOS 7.1).

Nouvelle est tombée hier que iOS 8 bêta 4 avait enlevé minimal-ui Mobile Safari (voir Webkit section dans iOS 8 Release Notes), ce qui nous laisse se demandant:

T1. Est-il encore possible de masquer la barre d'adresse sur le navigateur Safari Mobile?

Aussi loin que nous le savons, iOS 7 ne répond plus à l' window.scrollTo hack, cela laisse supposer que nous avons à vivre avec le petit écran de l'espace, à moins d'adopter une disposition verticale ou à l'utilisation mobile-web-app-capable.

T2. Est-il encore possible d'avoir un semblable doux plein écran de l'expérience?

Par doux en plein écran je veux vraiment dire, sans l'aide de l' mobile-web-app-capable de la balise meta.

Notre application web est construit pour être accessible, n'importe quelle page peut être mis en signet ou partagé en utilisant le navigateur natif du menu. En ajoutant mobile-web-app-capable nous empêcher les utilisateurs d'invoquer ce menu (lorsque celui-ci est enregistré à l'écran d'accueil), qui confond et antagonises utilisateurs.

minimal-ui utilisé pour le moyen-sol, se cachant le menu par défaut, mais en le gardant accessible avec un robinet -- si Apple a peut-être supprimé en raison d'autres problèmes d'accessibilité (tels que les utilisateurs ne sachant pas où taper pour activer le menu).

T3. Est un plein écran de l'expérience en vaut la peine?

Il semblerait qu'un plein écran de l'API n'est pas à venir sur iOS n'importe quand bientôt, mais même si elle l'est, je ne vois pas comment le menu sera conservé dans un endroit accessible (en va de même pour google Chrome sur Android).

Dans ce cas, peut-être que nous devrions laisser le navigateur safari mobile comme il est, et compte pour la fenêtre d'affichage de la hauteur (pour l'iPhone 5+, c'est 460 = 568 - 108, où 108 comprend le système d'exploitation, la barre d'adresse et le menu de navigation; pour iPhone 4 ou plus, c'est de 372).

Aimerais entendre quelques solutions de rechange (en dehors de la construction d'une application native).

Answer 1

Les minimes-interface utilisateur fenêtre de propriété est plus pris en charge dans iOS 8. Cependant, la très faible-de l'interface utilisateur lui-même n'est pas disparu. L'utilisateur peut saisir les minimes-interface utilisateur avec un "toucher-glisser" le geste.

Il y a plusieurs pré-conditions et les obstacles à gérer l'affichage de l'état, par exemple, pour un minimum de-l'interface utilisateur de travailler, il y a suffisamment de contenu pour permettre à l'utilisateur de faire défiler; pour un minimum de-l'interface utilisateur de persister, de défilement de la fenêtre doit être compensée au chargement de la page et après changement d'orientation. Cependant, il n'y a pas moyen de calculer les dimensions de la minimal-interface utilisateur à l'aide de l' screen variable, et donc aucun moyen de savoir lorsque l'utilisateur est dans le minimum de-l'interface utilisateur à l'avance.

Ces observations est un résultat de recherche dans le cadre du développement de Bord – view manager pour iOS 8. La fin de la mise en œuvre fonctionne de la façon suivante:

Lorsque la page est chargée, Bord permettra de créer un tapis roulant élément. Tapis roulant élément est utilisé pour donner de l'espace utilisateur pour les faire défiler. Présence de le tapis roulant élément permet de s'assurer que l'utilisateur peut entrer les minimes-ui vue et qu'il continue à persister si l'utilisateur recharge la page ou des changements orientation de l'écran. Il est invisible à l'utilisateur tout le temps. Cette élément possède l'ID brim-treadmill.

Lors du chargement de la page ou après le changement de l'orientation de Bord est à l'aide de Crier pour détecter si la page est dans le minimal de l'interface utilisateur (vue de la page qui a déjà été minimes-ui et a été rechargée restera dans le minimum de-l'interface utilisateur si le contenu de la hauteur est plus grande que la fenêtre d'affichage de la hauteur).

Lorsque la page est dans le minimum de-l'interface utilisateur, le Bord de désactiver le défilement de la document (il le fait dans un coffre-fort manière à ne pas affecter le contenu de l'élément principal). La désactivation de document de défilement empêche accidentellement, laissant le minimum d'-interface utilisateur en cas de défilement vers le haut. Comme pour l'original iOS 7.1 spec, en appuyant sur la barre du haut ramène le reste du chrome.

Le résultat final ressemble à ceci:

Pour l'amour de la documentation, et dans le cas où vous préférez écrire votre propre mise en œuvre, il est intéressant de noter que vous ne pouvez pas utiliser Crier pour détecter si l'appareil est en minimes-ui tout de suite après la orientationchange événement parce qu' window dimensions de ne pas refléter la nouvelle orientation jusqu'à ce que la rotation de l'animation est terminée. Vous devez attacher un écouteur à l' orientationchangeend événement.

Crier et orientationchangeend ont été développés dans le cadre de ce projet.

Answer 2

Puisqu'il n'est pas programmatique façon à imiter minimal-ui, nous avons pu trouver une solution à ce problème, à l'aide de calc() et connu iOS barre d'adresse de hauteur à notre avantage:

La démonstration suivante de la page (également disponible sur les gist, plus de détails techniques, y) va demander à l'utilisateur de faire défiler, qui déclenche alors une douce fullscreen (cacher la barre d'adresse/menu), où les en-têtes et le contenu remplit la nouvelle fenêtre d'affichage.

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

Answer 3

Juste dire au revoir à un minimum d'-ui (pour l'instant)

C'est vrai, minimal-ui pourrait être à la fois utile et nuisible, et je suppose que le compromis a maintenant un autre de la balance, en faveur de la plus récente, plus les iPhones.

J'ai du faire avec la question, tout en travaillant avec mon js cadre pour les applications HTML5. Après de nombreuses tentatives de solutions, chacune avec leurs inconvénients, je cède à considérer que l'espace perdu sur les iPhones précédents que 6. Compte tenu de la situation, je pense que la seule solide et prévisible le comportement est déterminé à l'avance.

En bref, j'ai fini par empêcher toute forme de minimal-ui, donc au moins mon la hauteur de l'écran est toujours la même et que vous savez toujours ce que l'espace que vous avez pour votre application.

Avec l'aide de temps, assez d'utilisateurs auront plus de place.

---

MODIFIER

Comment je fais

C'est un peu simplifié, pour la démo fin, mais doit travailler pour vous. En supposant que vous avez un conteneur principal

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

Alors:

1. puis avec le js, j'ai mis en #main's la hauteur de la fenêtre de la hauteur disponible. Cela permet aussi de traiter avec d'autres défilement des bugs trouvés dans les deux iOS et Android. Cela signifie également que vous devez faire sur comment le mettre à jour, il suffit de noter que;

2. Je bloque sur-défilement lorsque l'on atteint les limites de la faire défiler. Celui-ci est un peu plus profond dans mon code, mais je pense que vous pouvez ainsi suivre le principe de cette réponse pour les fonctionnalités de base. Je pense qu'il pourrait flickr un peu, mais il va faire le travail.

---

Voir la démo (sur iPhone)

Comme une note: cette application est trop bookmarkable, car elle utilise un routage interne à hachés adresses, mais j'ai aussi ajouté une invite aux utilisateurs d'iOS pour ajouter à l'accueil. Je me sens de cette façon contribue à la fidélisation et le retour des visiteurs (et donc l'espace perdu est de retour).

Answer 4

La racine du problème ici semble que iOS8 safari de ne pas masquer la barre d'adresse lorsque vous faites défiler vers le bas si le contenu est égal ou inférieur de la fenêtre d'affichage.

Comme vous l'avez découvert déjà, ajoutant un peu de rembourrage à bas permet de contourner ce problème:

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

Le ci-dessus css devrait être conditionnelle appliquée, par exemple avec UA reniflant l'ajout d'un gt-ios8 classe <html>.

Answer 5

Je veux commenter/répondre partiellement/partager mes pensées. Je suis l'aide de la overflow-y:scroll technique pour un gros projet à venir de la mine. L'aide qu'il a deux avantages MAJEURS.

a) Vous pouvez utiliser un tiroir avec des boutons d'action à partir du bas de l'écran; si le document parchemins et le bas de la barre disparaît, appuyez sur un bouton situé au bas de l'écran sera la première à prendre la barre du bas apparaissent, puis être cliquable. Aussi, la façon dont ça fonctionne, les causes des problèmes avec les auxiliaires modaux qui ont des boutons au fond.

b) Lors de l'utilisation d'un élément survolé, les seules choses qui sont repeints en cas de grand css changements sont ceux dans la partie visible de l'écran. Cela m'a donné un énorme gain de performance lors de l'utilisation de javascript pour modifier le css de plusieurs éléments à la volée. Par exemple, si vous avez une liste de 20 éléments dont vous avez besoin, repeintes et seulement deux d'entre eux sont sur l'écran de l'élément survolé, seuls ceux qui sont repeints, tandis que le reste sont repeints lors du défilement. Sans elle, toutes les 20 éléments sont repeints.

..et bien sûr, cela dépend du projet et si vous avez besoin de la fonctionnalité que j'ai mentionnés. Google utilise survolé éléments pour gmail pour utiliser la fonctionnalité que j'ai décrit sur une). Omi, il vaut la peine de le alors que, même en tenant compte de la petite taille dans les anciens iphones (372px comme vous l'avez dit).