Comment faire un <div> remplir exactement la fenêtre du navigateur, y compris Mobile Safari à partir de 2019
Je travaille sur une application Web d'une seule page, qui sera généralement utilisée sur les appareils mobiles. L'une de ses fonctionnalités est un mode carte, qui occupe temporairement l'intégralité de la fenêtre du navigateur; une échelle de distance et certains contrôles sont attachés aux quatre coins de la carte. Voici une petite capture d'écran de la carte pour que vous puissiez dire de quoi je parle:
La carte est implémentée en tant que <div> Avec position: fixed Et les quatre coordonnées zéro; J'ai également défini temporairement le <body> Sur overflow: hidden Pendant que la carte est visible pour gérer le cas où l'affichage de l'application sous-jacente est déplacé loin de l'origine. Cela suffit pour que la carte fonctionne exactement comme je le souhaite sur les navigateurs de bureau. Les navigateurs mobiles exigeaient également que je donne une balise meta viewport avec quelque chose comme "width=device-width,user-scalable=no" Afin que la zone visible de la fenêtre corresponde exactement à la fenêtre.
Tout cela a fonctionné magnifiquement il y a quelques années lorsque j'ai écrit cette application, mais quelque part le long de la ligne, iOS Safari a cessé d'honorer toutes les options de la méta-fenêtre impliquant la mise à l'échelle - apparemment, trop de sites ont mal appliqué la balise, ce qui a entraîné un texte illisible, mais non zoomable. Actuellement, si vous activez la carte sur ce navigateur, vous obtiendrez probablement une vue légèrement agrandie, qui coupe ces boutons à droite et en bas - et vous ne pouvez pas le faire quoi que ce soit à ce sujet , car toutes les touches sont interprétées comme des gestes de zoom/panoramique pour la carte, plutôt que de défilement du navigateur. La carte n'est pas terriblement utile sans les fonctionnalités accessibles via ces boutons - et sans le bouton en haut à droite, vous ne pouvez même pas fermer la carte. La seule solution consiste à recharger la page, ce qui peut entraîner la perte de données non enregistrées.
Je vais certainement ajouter l'utilisation de history.pushState/onpopstate pour que la superposition de carte se comporte comme une page distincte. Vous seriez en mesure de sortir du mode carte en utilisant le bouton Précédent du navigateur - mais cela ne résout pas le reste de la perte de fonctionnalité due à des boutons manquants.
J'ai envisagé d'utiliser .requestFullscreen() pour implémenter la superposition de carte, mais il n'est pas pris en charge partout où l'application serait autrement utilisable. En particulier, cela ne fonctionne apparemment pas du tout sur les iPhones, et sur les iPad, vous obtenez une barre d'état et un énorme bouton `` X '' superposant votre contenu - mon échelle de distance ne serait probablement plus lisible. Ce n'est pas sémantiquement ce que je veux vraiment, de toute façon - j'ai besoin de la fenêtre complète , pas du plein écran.
Comment faire fonctionner un affichage plein écran sur des navigateurs modernes? Toutes les informations que je peux trouver sur le sujet parlent de l'utilisation de la balise meta viewport, mais comme je l'ai mentionné, cela ne fonctionne plus.
Solution
Définissez la hauteur du div en plein écran sur window.innerHeight avec JavaScript, puis le mettre à jour lors du redimensionnement de la fenêtre.
Même problème ici:
https://stackoverflow.com/a/37113430/8662476
Plus d'informations:
Les avez-vous essayés?
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
Vous devez définir la hauteur du corps et du code HTML à 100%
html, body {
width: 100%;
height: 100%;
margin: 0;
}
si vous utilisez position: fixed utilisez simplement la méthode CSS standard qui existe depuis de nombreuses années.
.divFixedClass{
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
}
Cela ne fera que redimensionner automatiquement la div à la taille complète de la fenêtre, et en utilisant la propriété fixe, elle est verrouillée en place, peu importe combien ils défilent, vous pouvez désactiver le défilement du corps si vous en avez besoin avec
html.noScroll, html.noScroll > body{
overflow:none;
}
donc si vous ajoutez simplement la classe noScroll à la balise html, cela désactivera le défilement. puis lorsque vous souhaitez autoriser à nouveau le défilement, vous pouvez.
essaye ça:
<meta name="viewport" content="width=device-width, height=device-height ,
initial-scale=1.0,user-scalable=no, shrink-to-fit=yes" />
Ceci est une ancienne solution, et résout un problème qui est étroitement lié, mais pas exactement le même, donc je ne sais pas si elle s'applique: https://github.com/gajus/brim
C'est censé être une solution similaire à minimal-ui.
Voici une autre question qui fait référence à cette réponse: iOS 8 a supprimé la propriété de la fenêtre d'affichage "minimal-ui", existe-t-il d'autres solutions "soft fullscreen"?
Faites-moi savoir si cela aide du tout.
Essayez le code suivant pour div
.class{height:100vh;}
Vous pouvez l'implémenter en utilisant une structure à deux couches pour vos contrôles de carte et votre couche de carte. Cela signifie que vous n'avez en fait pas besoin de javascript pour implémenter ce que vous voulez (bien qu'aucun exemple de codage n'ait été donné dans la question). Vous pouvez manipuler la fenêtre avec CSS et c'est la signification réelle de vw et vh afin de répondre à votre commentaire Comment 100vw/100vh est-il censé aider?, cela peut aider puisque v signifie viewport.
Voir l'extrait par exemple.
Un meilleur exemple (étant plus précis sur des paramètres spécifiques qui pourraient être manqués) pourrait être fourni si un certain codage était présent dans la question.
PS: la couche de la carte est simulée par une image zoomée sur le défilement.
function zoom(event) {
event.preventDefault();
scale += event.deltaY * -0.01;
// Restrict scale
scale = Math.min(Math.max(.125, scale), 4);
if (scale < 1) {
scale = 1;
}
// Apply scale transform
el.style.transform = `scale(${scale})`;
}
let scale = 1;
const el = document.getElementById('map');
el.onwheel = zoom;.container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
overflow: hidden;
width: 100vw;
height: 100vh;
background-color: transparent;
}
#map {
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
background-position: center center;
background-image: url(https://picsum.photos/800/500.webp);
z-index: 1;
}
#main {
display: grid;
position: absolute;
background-color: transparent;
top: 0;
left: 0;
grid-template-columns: 6rem auto 6rem;
grid-template-rows: 3rem auto 3rem;
width: 0;
height: 0;
z-index: 2;
}
.t-l {
background: #fc0;
position: fixed;
z-index: 2;
color: #000;
top; 0;
left: 0;
width: 6rem;
height: 3rem;
display: block;
grid-column-start: 1;
grid-column-end: column1-end;
grid-row-start: 1;
grid-row-end: row1-end;
}
.t-r {
background: #0cf;
position: fixed;
z-index: 2;
color: #000;
top; 0;
left: calc(100vw-6rem);
right: 0;
width: 6rem;
height: 3rem;
display: block;
grid-column-start: 3;
grid-column-end: column3-end;
grid-row-start: 1;
grid-row-end: row1-end;
}
.b-l {
background: #c0f;
position: fixed;
z-index: 2;
color: #000;
bottom: 0;
top: calc(100vh-3rem);
left: 0;
width: 6rem;
height: 3rem;
display: block;
grid-column-start: 1;
grid-column-end: column1-end;
grid-row-start: 3;
grid-row-end: row3-end;
}
.b-r {
background: #cf0;
position: fixed;
z-index: 2;
color: #000;
top: calc(100vh-3rem);
left: 100vw;
margin-left: -6rem;
bottom: 0;
width: 6rem;
height: 3rem;
display: block;
grid-column-start: 3;
grid-column-end: column3-end;
grid-row-start: 3;
grid-row-end: row3-end;
}<div class="container">
<div id="main">
<button class="t-l">top left control</button>
<button class="t-r">top right control</button>
<button class="b-l">bottom left control</button>
<button class="b-r">bottom right control</button>
</div>
<div id="map"></div>
</div>Comme je ne peux pas commenter, je voudrais ajouter que vous devriez vérifier si votre balise body est à la hauteur du navigateur. Vous pouvez également vérifier ceci: Chrome/Safari ne remplit pas 100% de la hauteur du parent flexible