Empêcher la barre d'adresses de se cacher dans les navigateurs mobiles

Je suis actuellement en train de travailler sur un site web avec une mise en page horizontale. Tous les éléments sont en position:absolute avec javascript. Leur taille est calculée avec fenêtre.innerHeight. Mon Problème est que, malgré les éléments ne sont pas plus élevés que la fenêtre de la hauteur, je peux faire défiler vers le bas (hauteur de la addressbar). C'est gênant de deux façons. D'abord, il déclenche la fenêtre de redimensionnement événement que j'ai ni envie, ni besoin à l'époque. Et Deuxième il ne joue pas bien avec certains contenus des boîtes dont le contenu doit être de défilement verticale. Parfois, je peux faire défiler les cases, mais parfois l'ensemble de la page défile en premier (comme l'a dit avant: hauteur de la addressbar). Est-il une solution qui me permettrait d'éviter cette adresse-bar masquage automatique mécanisme sur tous les appareils.

Merci d'avance!

Ce n'est pas de défilement à tous:http://maxeffenberger.de/test.html

Cela peut faire défiler horizontalement (de sens que pour voir le contenu caché), MAIS aussi à la verticale jusqu'à ce que le addressbar est caché (n'a pas de sens, car il n'existe pas d'autres "verticale" du contenu qui aurait besoin de plus d'espace: http://maxeffenberger.de/test2.html

source d'informationauteur Max Effenberger | 2013-08-05

  1. 18

    C'est la façon que j'ai réalisé:

                html{
                background-color: red;
                overflow: hidden;
                width:100%;
            }
            body{
                height:100%;
                position:fixed; /* prevent overscroll bounce*/
                background-color: lightgreen;
                overflow-y:scroll;
                -webkit-overflow-scrolling: touch; /* iOS velocity scrolling */
                width:50%;                    
                margin-left:25%;
            }
  2. 0

    La solution la plus fiable peut être d'utiliser l'API fullscreen: http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API

  3. -1

    Utilisation de la fenêtre.innerHeight à définir les limites de votre site

    Vous pouvez définir html et corps ou votre wrapper à

    var height = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

    Gardez à l'esprit qu'il doit être mis à jour sur chaque redimensionner!

    de la fenêtre.innerHeight vous permet d'obtenir la hauteur réelle de la partie intérieure de la vue navigateur (pas la barre du navigateur).
    Vous pouvez atteindre la hauteur du contenu lorsque la barre est visible, ou même si elle est masquée (glisser vers le bas).

    Dans mon cas:

    1. ensemble corps à 100vh via CSS.

    Malheureusement vh ignore le navigateur bars, quelles sont les causes de certains problèmes sur les appareils mobiles avec les navigateurs modernes que masquer la barre pendant/après le défilement.
    Jetez un oeil au.

    C'est aussi ma solution à des problèmes comme ceux ci-dessus.

    2. Calculer la hauteur exacte via JS à la fonction. Mise à jour sur tous les redimensionner!

    => le contenu de ce site est désormais limitée à la partie intérieure de la vue.

    Sur mobile:

    Android 7.1.1/Chrome 61.0
    iOS 9.3.5/Safari

    => maintenant, la barre du navigateur n'est plus à se cacher sur de défilement et balayez-les événements.

    Garder à l'esprit:

    C'est seulement de travail, lorsque vous n'utilisez pas certains bibliothèque qui mène à croire que vous êtes de défilement horizontale, mais en fait, est d'utiliser corps.hauteur.

  4. -3

    Avec une fenêtre javascript.scrollTo(0, 1); vous pouvez corriger le problème.

    Regarder http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/ pour la solution.