28112 sujets

CSS et mise en forme, CSS3

Hauteur réelle fenêtre mobile

Bonjour

Je réalise la mise en page d'un site dont le header prend la hauteur complète de l'écran (image + texte). Le slogan du site se trouve en bas centré à droite.

Le header en flex, avec une position absolute (pour une histoire de scroll plus rapide que le reste de la page), le slogan dans un H1 avec un margin-top à auto. Il se colle donc parfaitement en bas de page.
En css le header est à 100vh.
Cela fonctionne parfaitement sur desktop, mais sur mobile la hauteur 100vh est égale à la hauteur demandée mais la barre d'adresse du navigateur (chrome en l'occurrence) vient décaler la page de quelques pixel et le slogan disparaît. La barre d'adresse se rétracte en scrollant vers le bas à partir d'une certaine valeur de scroll et réapparait lorsque que l'on remonte.
Si on scrolle vers le bas et que l'on appuie sur le petit bouton retour haut, la barre d'adresse ne se redéplie pas et là le site apparaît tel que réfléchi / envisagé.
Comment peut-on avoir la taille réelle de la fenêtre sans cette foutue barre d'adresse.
J'étais tenté de soustraire à ma hauteur de fenêtre quelques pixels correspondant à la hauteur de la barre d'adresse mais je pense que cette hauteur ne sera pas la même en fonction des navigateurs et smartphone utilisés ...

le site en question : www.nosrdv.com

Merci pour échanges avisés !
loic
Modifié par _Lolo (04 Jul 2019 - 12:17)
ouahh la flèche ... même question que Duchampignon trois posts en dessous ...

mais il n'a pas la réponse non plus ...
bon en attendant mieux et de vous lire (j'espère qu'il y a une solution miracle sans javascript ...)
je mets en bas de ma page un bout de code qui sélectionne le header, qui calcule la hauteur réelle de la page innerHeight (intérieur de la fenêtre), et qui l'applique à la hauteur de la div. J'ajoute du coup un pitit écouteur de changement de taille de fenêtre qui rappelle la fonction si besoin...

function hauteurAccueil() 
        {
            header.style.height = Math.round(window.innerHeight)+"px";
        }
        
window.addEventListener('resize', hauteurAccueil, false);
hauteurAccueil();
oups ! petite amélioration ... parce que du coup avec l'écoute sur la taille de fenêtre, quand la barre disparait hop la taille change, recalcule et chez moi l'image grossit légèrement (logique) donc du coup je rajoute une pitite condition, si le resize est supérieur à la taille d'origine + 100px (c'est au pif !) et bien on ne change rien, sinon c'est qu'il y a vraiment du resize, et donc là on applique la nouvelle hauteur du header


var header=document.querySelector("header"),
      headerH = Math.round(window.innerHeight);

function hauteurAccueil() {
            if (Math.round(window.innerHeight)>headerH+100 || Math.round(window.innerHeight)<headerH-100) 
            {
                    console.log('tiens, ça bouge vraiment !');
                    headerH=Math.round(window.innerHeight);
             }
            header.style.height = headerH+"px";
        }
        
window.addEventListener('resize', hauteurAccueil, false);
        
hauteurAccueil();
Bonjour,
Ainsi, innerHeight calcule bel et bien la valeur réelle de la fenêtre, sans la barre d’adresse ? Comme dit dans mon post, je n’ai pas moyen de tester en pratique vu que je ne possède pas le genre d’appareil ayant ce comportement. En plus, je ne sais pas si cette méthode par variable CSS est conseillée ni même si elle fonctionne...
Sinon, quelqu’un aurait une idée de s’il existe un moyen de détecter si le navigateur a un tel comportement ? Histoire d’éviter du JS inutile pour les autres.
bonjour

en fait les "misères" de cette barre d'adresse qui se rétracte sont plus nombreuses qu'on croit. Perso j'ai un huawei sous android avec chrome et j'ai le même souci (c'est pourquoi j'ai pu le tester et décidé d'y apporter une solution). Mais on a le même problème sur tablette ...
Bref, un bout de code javascript natif, non seulement ça ne pèse rien et c'est pas non plus complexe à exécuter, ce serait mieux d'avoir la prise en charge en css et on en parle plus mais si ça ne fonctionne pas je préfère encore faire quelques lignes de js que du jquery ...
Donc par exemple, lorsqu'on charge la page, l'innerHeight calcule bien la hauteur réelle intérieure de la fenêtre soit sans la barre d'adresse. Dès qu'on descend un peu vers le bas la barre se rétracte, la hauteur change mais dans mon cas si je redimensionne de suite hop l'image va "sauter" sauter à l'écran en grossissant (à moins de fixer le background-size mais je suis en cover). Une fois descendu, si on clique sur le retour haut, la barre adresse reste rétractée et l'image dépasse, donc il faut recalculer avec le onclick retour haut. Si je suis en portrait dans la page, la barre est rétractée, je passe en paysage, la barre est toujours rétractée et quand je remonte elle se déplie du coup quand on arrive vers le haut à nouveau ça dépasse (là je ne l'ai pas traité)... et parfois quand je remonte d'un coup avec le doigt et que la page remonte rapidement, j'ai l'impression que la taille d'écran retenue n'est pas la bonne puisque la barre se déplie mais le js ne recalcule pas le innerHeight, donc j'ai l'impression (sur ma configuration smartphone) qu'il faut vraiment appuyer remonter ce qui déplie la barre et là ça prend en compte le innerHeight
Tout ça pour dire que la solution miracle n'existe pas. Perso comme j'ai du js déjà à gogo pour d'autres besoins dans la page, un peu plus, un peu moins !
Mais on est preneur d'autres expériences, réflexions Smiley smile
Sujet clos
Aller à