From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- files/fr/tools/responsive_design_mode/index.html | 213 +++++++++++++++++++++++ 1 file changed, 213 insertions(+) create mode 100644 files/fr/tools/responsive_design_mode/index.html (limited to 'files/fr/tools/responsive_design_mode/index.html') diff --git a/files/fr/tools/responsive_design_mode/index.html b/files/fr/tools/responsive_design_mode/index.html new file mode 100644 index 0000000000..e9de1226c9 --- /dev/null +++ b/files/fr/tools/responsive_design_mode/index.html @@ -0,0 +1,213 @@ +--- +title: Vue adaptative +slug: Outils/Vue_adaptative +tags: + - Firefox + - Mobile + - Responsive Design + - Tools + - Web Development +translation_of: Tools/Responsive_Design_Mode +--- +
{{ToolsSidebar}}
+ +

Le responsive design (vue adaptative) est la pratique de concevoir un site web afin que celui-ci s'affiche correctement sur un grand nombre d'appareils différents. En particulier les mobiles et les tablettes, ainsi que les ordinateurs (portable ou de bureau).

+ +

Le facteur le plus évident ici est la taille d'écran, mais il y a aussi d'autres facteurs, incluant la densité de pixels de l'affichage ainsi que s’il est tactile ou non. Le mode vue adaptative vous donne un moyen simple de simuler ces facteurs, de tester à quoi ressembler votre site web et comment il se comportera sur différents appareils.

+ +

Activation et désactivation du mode de vue adaptative

+ +

Il existe trois façons d’activer la vue adaptative :

+ + + +

Utiliser la vue adaptative

+ +

Lorsque l'outil est activé, la zone de contenu des pages web prend la taille de l'écran de l'appareil sélectionné. Par défaut la taille est de 320 x 480 pixels.

+ +
+

Note: L'appareil sélectioné ainsi que l'orientation (portrait/paysage) sera sauvegardé entre deux sessions.

+
+ +

 

+ +

+ +

 

+ +

Il est possible d'afficher ou de cacher la boîte à outils indépendamment de la vue adaptative elle-même :

+ +

Quand la vue adaptative est activée, il est possible de continuer à naviguer comme vous le feriez normalement dans la zone de contenu redimensionnée.

+ +

Sélectionner un appareil

+ +

Juste au-dessus de la zone d'affichage, se trouve la ligne "Aucun appareil sélectionné". Cliquer sur cette ligne ouvrira une liste de noms d'appareils. Sélectionner un appareil, et le mode de vue adaptative configurera les propriétés suivantes correspondantes à l'appareil sélectionné :

+ + + +

En plus, Firefox modifiera l'en-tête HTTP User-Agent pour s'identifier en tant que navigateur par défaut. Par exemple si l'appareil sélection est un iPhone, alors Firefox s'identifiera comme Safari. La propriété navigator.userAgent aura la même valeur.

+ +

{{EmbedYouTube("JNAyKemudv0")}}

+ +

Les appareils listés ne sont qu'une partie de tous les appareils possibles. En bas de la liste, le bouton "Modifier la liste" ouvrira un panneau avec la liste complète de tous les appareils. Ce panneau permet de définir les appareils qui apparaitront dans la liste déroulante. La liste des appareils ainsi que leurs valeurs associées proviennent de : https://github.com/mozilla/simulated-devices.

+ +

Sauvegarder des appareils personnalisés

+ +

Depuis de Firefox 54, il est possible de sauvegarder des appareils personnalisés. Chaque appareil peut avoir ses propres propriétés de :

+ + + +

Il est également possible de prévisualiser les propriétés des appareils existants en survolant leur nom dans le menu des appareils.

+ +

+ +

Contrôler les appareils

+ +

Il est possible de fournir des valeurs personnalisées pour la plupart des propriétés d'un appareil.

+ +

Modifier la taille d'écran

+ +

Pour modifier la taille d'écran, il faut cliquer sur les valeurs en dessous de la zone d'affichage et les modifier :

+ +

+ +

Il est également possible de déplacer le coin en bas à droite de la zone d'affichage.

+ +

Depuis Firefox 59, il est possible d'éditer les tailles d'écran avec le clavier. Lorsque les dimensions sont sélectionnées (ou que le curseur d'écriture est dedans). Il est également possible d'utiliser les flèches haut et bas de 1px.

+ +

Pour changer les dimensions plus rapidement, il est possible d'utiliser maj pour itérer de 10pixels en 10 pixels.

+ +

Modifier le ratio pixel de l'appareil

+ +

Pour définir un ratio personnalisé, il faut cliquer sur la boite "DPR" et sélectionner la valeur voulue.

+ +

Activer/désactiver la simulation du touch

+ +

Pour ce faire, il faut cliquer sur l'icône en forme de doigt :

+ +

Lorsque la simulation est activée, les évènements de la souris sont transformés en évènements évènements touch.

+ +

Contrôler le comportement de rechargement de page

+ +

Depuis Firefox 60 le menu de sélection Actualiser quand... a été rajouté :

+ +

+ +

Cliquer dessus affiche deux options qui sont toutes deux désactivées par défaut :

+ + + +

Avant Firefox 60, ces actualisations étaient automatiques, car certains comportements de la page n'étaient pas fonctionnels sinon. Par exemple, certaines pages vérifient la compatibilité tactile au chargement, et n'ajoute des évènements que si tel est le cas.

+ +

Cependant, si vous n'êtes pas intéressé par de telles fonctionnalités (par exemple si vous avez juste envie de vérifier la mise en page dans différentes résolutions), ces rechargements peuvent s'avérer ennuyants. Il est donc utile de pouvoir contrôler ces rechargements.

+ +

Lors d'un changement de certaines options, un message d'avertissement est affiché pour vous prévenir que les rechargements ne sont plus automatiques, et précise comment réactiver ce comportement :

+ +

+ +

Activer/désactiver l'orientation

+ +

Pour alterner entre les orientations d'écran portrait et paysage, il suffit de cliquer sur l'icône à droite de la sélection d'appareils :

+ +

+ +

Bridage réseau

+ +

Si tout le développement est fait avec une bonne bande passante, il est possible d'avoir des problèmes avec une connexion moins rapide et de ne pas s'en rendre compte. La Vue Adaptative permet de dire au navigateur d'émuler (très approximativement) les caractéristiques de différents types de réseaux.

+ +

Les caractéristiques émulées sont :

+ + + +

La table ci-dessous liste les valeurs associées à chaque type de réseau. Cependant, ne vous fiez pas à cela pour des mesures de performances exactes. Le but n'est d'avoir qu'une idée approximative de l’expérience utilisateur dans différentes conditions.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SélectionVitesse de téléchargementVitesse d'uploadLatence minimum (ms)
GPRS50 KB/s20 KB/s500
Regular 2G250 KB/s50 KB/s300
Good 2G450 KB/s150 KB/s150
Regular 3G750 KB/s250 KB/s100
Good 3G1.5 MB/s750 KB/s40
Regular 4G/LTE4 MB/s3 MB/s20
DSL2 MB/s1 MB/s5
Wi-Fi30 MB/s15 MB/s2
+ +

Pour sélectionner un réseau il faut cliquer sur la liste déroulante qui par défaut vaut "Aucune limitation" :

+ +

Prendre une capture d'écran

+ +

Pour prendre une capture d'écran, il suffit de cliquer sur l'icône en forme d'appareil photo :

+ +

Les captures d'écran sont enregistrées à l'emplacement de téléchargement par défaut de Firefox.

+ +

Depuis Firefox 53, si la case "Enregistrer dans le presse-papier" est cochée dans la page des paramètres alors, la capture d'écran sera aussi enregistrée dans le presse-papier du système d'exploitation.

-- cgit v1.2.3-54-g00ecf