iPhone - Masquer la barre d'adresse sur le chargement de la page

J'ai une page web qui est destiné à être chargé sur une personne de l'iPhone. Lorsque la page est chargée, je veux cacher l'état et la barre d'adresse en haut. J'ai vu d'autres sites le font. Dans une tentative pour ce faire, j'ai mis le code suivant dans la section de ma page web:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;" />
<script type="text/javascript">
  function page_Load() {
    setTimeout(function() { window.scrollTo(0, 1); }, 100);
  }
</script>

La "page_Load" la fonction est déclenchée par l'événement onload de la page de l'élément de corps. Curieusement, lorsque la page se charge, l'état/de la barre de titre est caché, cependant, pas la barre d'adresse.

Comment puis-je cacher à la fois de l'état/de la barre de titre et la barre d'adresse d'une page web est chargée?

Merci!

source d'informationauteur Villager

  1. 10

    Pour ceux d'entre vous à l'aide de jQuery, voici un moyen encore plus simple de version:

    $('body').scrollTop(1);
  2. 4

    Pensé à elle. Il s'avère que ma page a besoin d'être "plus". À partir d'un point de vue absolu, le dimensionnement est correct, mais j'ai besoin d'ajouter un couple de pixels en bas. Cette cachait la barre d'adresse comme souhaité.

    Merci.

  3. 0

    Un rapide et sale méthode jQuery...

    $(function() {
    function orientationChange(e) {
        $("body").scrollTop(1);
    }
    $("body").css({ height: "+=300" }).scrollTop(1);
    $(window).bind("orientationchange", orientationChange);
});

    Ce cache également le bar quand une personne change de leur orientation (car elles ne deviennent visibles à nouveau normalement). Il suffit d'ajouter ce quelque part sur votre page et il va automatiquement (indépendamment de 100% de la hauteur/largeur/whatever) faire ce que vous chercher. Je n'ai pas mesuré la hauteur exacte de la barre d'adresse, mais elle semble être autour de 70 pixels. J'ai mis 300 là juste pour s'assurer qu'il fonctionne.

  4. 0

    Cette page explique plus de la mise à jour de l'état de 'plein écran'.