Désactiver le masquage de la barre d'adresse sur mobile

Je travaille sur un site web mobile qui a "pages" qui ont divisions qui occupent les écrans de taille complète et vous pouvez faire défiler entre chacun d'entre eux. Le problème est que la fenêtre se redimensionne à chaque fois qu'un utilisateur fait défiler vers le bas parce que la barre d'adresse de peaux. Cela provoque des problèmes lorsque vous faites défiler jusqu'à la complète en bas et la barre d'adresse puis se cache.

Est-il possible d'avoir la barre d'adresse de toujours afficher sur les appareils mobiles?

Je crois que vous pouvez faire à la hauteur de <body> la même que la fenêtre d'affichage et d'ajouter une barre de défilement à <body>.

OriginalL'auteur Randy | 2014-04-19

  1. 9

    Vous pouvez envelopper votre HTML avec div et faire quelque chose comme ceci: http://jsfiddle.net/DerekL/Fhe2x/show

    $("html, body, #wrapper").css({
    height: $(window).height()
});

    Il fonctionne sur Android et iOS.

    Ah, je vois. Si la div est de la même taille que le corps, mais est scrollable. Cela peut fonctionner, je vais l'essayer bientôt. Merci!
    Ce qui est excellent. Aussi, si vous avez besoin de garder plusieurs divs (peut-être parce que vous avez ancres fixe ou défilement des fonctions javascript), vous pouvez appliquer de Derek exemple à chaque "fullpage-div": la barre d'adresse ne disparaîtra pas lorsque le défilement, mais il n'y aura pas de redimensionnement des problèmes. Vous pouvez ensuite continuer en mode plein écran sans défilement "bugs"). Juste testé sur Android 5.0 avec google Chrome.

    OriginalL'auteur Derek 朕會功夫

  2. 0

    Vous êtes à la recherche à l'iPhone? Je ne sais pas sur Android, mais sur iOS 7 pour iPhone, il n'est pas possible. Une chose que vous pourriez faire est d'utiliser minimal-ui ont toujours minimisé la barre de navigation, en gardant une cohérence de la taille de la fenêtre:

    <meta name="viewport" content="width=device-width, minimal-ui">

    http://visuellegedanken.de/2014-03-13/viewport-meta-tag-minimal-ui/

    J'espère que ça aide!

    Merci, mais je veux le contraire. Je suis actuellement à la recherche à Android, mais je vais être à la recherche à un iOS navigateur à un certain point.
    Mise à jour: minimal-ui est passé de iOS 8.

    OriginalL'auteur lachlanjc

  3. 0

    La façon la plus simple d'y parvenir est de faire défiler dans un récipient, plutôt que de le faire défiler le document.

    E. g.:

    <html><body>
  <div id="scrollable-content"> ... all your content here ... </div>
</body></html>

html, body {
  height: 100%;
}

#scrollable-content {
  height: 100%;
  overflow-y: scroll;
}

    OriginalL'auteur Bogdan Mihai