Différence entre la fenêtre d'affichage visuelle et la fenêtre d'affichage?
Quelle est la différence entre une fenêtre d'affichage visuelle et une fenêtre d'affichage de présentation pour un appareil mobile tel que l'iPhone/iPad?
J'ai parcouru de nombreuses ressources en ligne, mais je ne comprends toujours pas.
La fenêtre d'affichage est la partie de la page actuellement affichée à l'écran.
La fenêtre de présentation peut être beaucoup plus large que la fenêtre d'affichage et contient des éléments qui apparaissent et n'apparaissent pas à l'écran.
Imaginez la fenêtre de présentation comme une grande image qui ne change pas de taille ni de forme. Maintenant, imaginez que vous ayez un cadre plus petit à travers lequel vous regardez la grande image. Le petit cadre est entouré d'un matériau opaque qui masque toute la vision de la grande image, sauf une partie. La partie de la grande image que vous pouvez voir à travers le cadre est la fenêtre de visualisation. Vous pouvez vous éloigner de la grande image tout en maintenant votre cadre (zoom arrière) pour voir l'image entière en une fois, ou vous pouvez vous rapprocher (Zoomer) pour ne voir qu'une partie. Vous pouvez également modifier l'orientation du cadre, mais la taille et la forme de la grande image (fenêtre de présentation) ne changent jamais.
Pour un excellent traitement de la question, voir: http://www.quirksmode.org/mobile/viewports2.html
Une très bonne explication des deux est trouvéeici.
En résumé:
Visual Viewport
La fenêtre d'affichage est la partie de la page actuellement affichée à l'écran. L'utilisateur peut faire défiler l'écran pour changer la partie de la page qu'il voit ou zoomer pour changer la taille de la fenêtre d'affichage.
Fenêtre de présentation
Cependant, la disposition CSS, en particulier les largeurs en pourcentage, sont calculées par rapport à la fenêtre de présentation, qui est considérablement plus large que la fenêtre d'affichage.
Ainsi, l'élément prend initialement la largeur de la fenêtre de présentation et votre code CSS est interprété comme si l'écran était beaucoup plus large que l'écran du téléphone. Cela garantit que la présentation de votre site se comporte comme sur un navigateur de bureau.
Quelle est la largeur de la fenêtre de présentation? Cela diffère selon le navigateur. Safari iPhone utilise 980px, Opera 850px, Android WebKit 800px et IE 974px.
En bref, la fenêtre de présentation est généralement la largeur de la fenêtre lorsque vous effectuez un zoom complet sur l’écran.
Fenêtre de présentation
Ses mesures sont toujours les mêmes, indépendamment de l’orientation ou du niveau de zoom, elles dépendent uniquement de la fenêtre du périphérique/navigateur.
Visual Viewport
Cela varie (zoomé par exemple). C’est la partie de la page qui est réellement affichée à l’écran à un moment donné.
Exemple vidéo des deux mises en page
Fenêtre de présentation: la zone verte de la mini-carte.
Visual View: La boîte rouge dans la mini-carte.
Visualisation de présentation vs visual viewport (vidéo)
Sur les appareils mobiles/tablettes
Par défaut, sur les appareils mobiles, les choses peuvent être un peu plus compliquées, car pour permettre une expérience «full Web», de nombreux appareils mobiles renvoient un faux layout viewport dimensions.
Par exemple, l'iPhone classique indique par défaut un layout viewport width of 980px. Cela signifie que si vous créez un élément 320px sur l'iPhone, il ne remplira que le tiers environ de l'écran.
Cependant, ce mécanisme n’est pas aussi efficace pour les pages optimisées pour des écrans étroits utilisant des requêtes multimédia.
Lorsque nous créons des sites Web réactifs, il est très utile d’utiliser la balise méta de la fenêtre de visualisation, qui nous permet de contrôler la fenêtre de redimensionnement et de présentation de nombreux périphériques (en utilisant les dimensions réelles et non le faux signalé).
<meta name="*viewport*" content="*width=device-width*, initial-scale=1, maximum-scale=1" />
Exemples de balises méta viewport
Conseil: Si vous parcourez cette page avec un téléphone ou une tablette, vous pouvez Cliquer sur les deux liens ci-dessous pour voir la différence.
Sans la balise méta de la fenêtre d'affichage With la balise méta de la fenêtre d'affichage