Les émulateurs web

Bonjour !

Quand on code, il est indispensable de vérifier l'affichage de notre réalisation sous différents navigateurs, mais aussi sur différents supports (pc, tablette, mobile).
Évidemment, il est impossible d'avoir tous les modèles possibles dans un placard à la maison. Les concepteurs de navigateurs Internet l'ont bien compris. A présent, on retrouve sur chaque browser ce qu'on appelle un émulateur.


Pour faire simple, un émulateur va faire "comme si" tu étais sur le support ou avec la résolution que tu choisis.

Par exemple, ici, j'ai un écran avec une résolution de 1600*900. Voilà comment je vois une page web précise en plein écran :

Spoiler:

Eh bien, grâce à l'émulateur de Chrome (oui, je navigue sous Chrome), je peux voir en un clic le rendu du forum pour un écran d'iPhone X et surtout sans changer la configuration de mon ordinateur :

Spoiler:

Tout d'abord, si tu as l'habitude de coder, il est nécessaire d'avoir les 3 navigateurs les plus courants sur desktop :
- Chrome
- Firefox
- Edge
     
Parce que oui, la première chose à faire quand tu codes, c'est de vérifier l'affichage de ta "création" sur ces navigateurs.
Ensuite, chacun d'eux a son émulateur et nous allons voir ici comment l'utiliser

En règle générale, la manipulation va toujours être la même : on affiche la console de développement en cliquant sur F12 et on va dans le menu adéquate de la console.

Voyons ça en détail :


1) On affiche la console de developpement en cliquant sur F12 :

Spoiler:

(c'est ce que tu vois en bas)

2) On va dans le menu "émulateur" en cliquant sur le petit téléphone :

Spoiler:

3) Il te suffit ensuite de choisir ce que tu veux vérifier :

Spoiler:

1) On affiche la console de developpement en faisant F12 :

Spoiler:

2) On va dans le menu "émulateur" en cliquant sur "vue adaptative" :

Spoiler:

3) Il te suffit ensuite de choisir ce que tu veux vérifier :

Spoiler:

1) On affiche la console de developpement en faisant F12 :

Spoiler:

2) Pour accéder au menu d'émuluation, il faut cliquer sur :

Spoiler:

3) Il te suffit ensuite de choisir ce que tu veux vérifier :

Spoiler:

Au passage ici, tu l'as peut-être remarqué : tu peux également demander à ton navigateur de se comporter en IE7, IE8 ou IE9 :

Spoiler:

Pour cela, il te suffit de changer la sélection dans la liste déroulante "Mode document".

---

A présent, tu n'as plus aucune excuse pour ne pas afficher correctement tes codes sur tous les navigateurs