Fenêtre incorrecte dans les appareils mobiles Chrome

Question

Je suis en train d'essayer de créer un menu mobile responsive, et j'ai rencontré des problèmes avec différents types de viewports dans Google Chrome mobile et d'autres navigateurs. Voir les screenshots ci-dessous:

Par couleur verte Je peins bordure de la fenêtre. La première image ici faite en chrome mobile, et la seconde dans le navigateur de l'appareil par défaut. Sur IOS mobile, le résultat est le même que sur la dernière image. Bouton rouge, livre le studio est fixé avec le fond 0. Et il doit toujours être sur le bas de l'écran. Donc, les questions sont:

Pourquoi le chrome rend la hauteur viwport supérieure à ce qu'elle est vraiment?

Quelle est la meilleure façon de gérer cela?

Définir viewport meta tag n'aide pas non plus.

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0" /> 

Quelqu'un pourrait-il vous conseiller?

Answer 1

Malheureusement, c'est intentionnel ...

Ceci est un bien connaître question (au moins en safari mobile), ce qui est intentionnel, car il empêche les autres problèmes. Benjamin Poulain a répondu à un bug de webkit:

Ceci est complètement intentionnel. Il a fallu beaucoup de travail sur notre partie pour obtenir cet effet. :)

Le problème de base est le suivant: la zone visible change dynamiquement au fur et à mesure que vous faites défiler . Si nous mettons à jour la hauteur de la fenêtre CSS en conséquence, nous devons mettre à jour la mise en page pendant le défilement. Non seulement cela ressemble à de la merde, mais faire cela à 60 FPS est pratiquement impossible dans la plupart des pages (60 FPS est la fréquence de base sur iOS).

Il est difficile de vous montrer la partie "ressemble à de la merde", mais imaginez que vous faites défiler , le contenu se déplace et ce que vous voulez à l'écran est en continu.

mise à jour Dynamiquement la hauteur ne fonctionnait pas, nous avons eu quelques choix: drop unités de fenêtres sur iOS, correspondre à la taille du document comme avant iOS 8, utiliser la petite taille de vue, utilisez la grande taille de la vue.

Parmi les données que nous avions, en utilisant la plus grande taille de vue était le meilleur compromis . La plupart des sites utilisant des unités de viewport étaient plus beaux que les de l'époque.

Nicolas Hoizey a fait des recherches ce un peu: https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

Pas de solution prévue

À ce stade, il n'y a pas grand-chose que vous pouvez faire, sauf se abstenir d'utiliser la hauteur de la fenêtre sur les appareils mobiles. Mobile Chrome semble vouloir l'adapter aussi, bien qu'il ne sache pas si elles vont suivre à travers.

La seule façon de résoudre ce problème consiste à utiliser cet extrait:

height: calc(100vh - 60px); 60px 

où 60px est la hauteur du sommet de navigation, qui peut être différent dépendent du dispositif

Answer 2

Essayez d'utiliser le CSS suivant

bottom: 0; 
position: fixed;