Conception de page web réactive - Vueport

Qu'est-ce que le viewport ?

Le viewport (viewport) est la zone visible de l'utilisateur sur une page web.

Le viewport varie selon l'appareil, il est plus petit sur un téléphone portable que sur un écran d'ordinateur.

Avant les tablettes et les téléphones, les pages web étaient conçues uniquement pour les écrans d'ordinateurs, et les designs statiques et de taille fixe étaient très courants.

Puis,当我们开始使用平板电脑和手机上网时，固定大小的网页太大了，无法适应视口。为了解决这个问题，这些设备上的浏览器会按比例缩小整个网页以适应屏幕大小。

Ce n'est pas parfait ! C'est une correction rapide approximative.

Configurer le viewport

HTML5 a introduit une méthode qui permet aux concepteurs Web de <meta> Balise pour contrôler le viewport.

Vous devriez inclure dans toutes les pages web les balises suivantes pour contrôler le viewport. <meta> Élément viewport :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Il fournit des instructions au navigateur sur la manière de contrôler la taille et le niveau de zoom de la page.

width=device-width Certaines configurations définissent la largeur de la page pour suivre la largeur de l'écran de l'appareil (selon l'appareil).

Lorsque le navigateur charge pour la première fois la page,initial-scale=1.0 Certaines configurations définissent initialement le niveau de zoom.

Voici des exemples de pages web sans et avec le marqueur meta viewport :

Astuce :Si vous naviguez sur cette page avec un téléphone ou une tablette, vous pouvez cliquer sur les deux liens ci-dessous pour voir les différences.



Sans marqueur viewport


Avec le marqueur viewport

Ajuster le contenu à la taille de la fenêtre d'affichage

Les utilisateurs ont l'habitude de faire défiler verticalement les sites web sur les ordinateurs de bureau et les appareils mobiles, plutôt que de faire défiler horizontalement !

Par conséquent, si on force l'utilisateur à faire défiler horizontalement ou à réduire la page pour voir l'ensemble du site web, cela peut entraîner une mauvaise expérience utilisateur.

Des règles supplémentaires à suivre :

1. Ne pas utiliser d'éléments de largeur fixe grande - Par exemple, si la largeur de l'image est supérieure à la largeur du viewport, cela peut entraîner un défilement horizontal du viewport. Assurez-vous de modifier ce contenu pour qu'il s'adapte à la largeur du viewport.

- Ne pas faire dépendre le contenu de la largeur de viewport spécifique pour un bon effet - En raison des différences considérables entre les dimensions et les largeurs d'écran en pixels entre les appareils, le contenu ne devrait pas dépendre d'une largeur de viewport spécifique pour présenter un bon effet.

- Utiliser des requêtes média CSS pour appliquer des styles différents aux petits et grands écrans - Définir une largeur CSS absolue large pour les éléments de page peut rendre ces éléments trop larges pour les visuels de petit appareil. Il faut plutôt envisager d'utiliser des valeurs de largeur relative, par exemple width: 100%. De plus, il faut être prudent avec les valeurs de positionnement absolu grandes, qui peuvent faire glisser les éléments au-delà de la fenêtre de visualisation des petits appareils.