French English German Italian Russian Spanish

Vous venez de développer votre site en mode responsive, qui s'adapte à toutes les tailles d'écran, de la télévision au PC et MAC ainsi que pour les tablettes et bien sûr les téléphones portables. Bien sûr que votre développement marche car vous avez utiliser des bibliothèques comme bootstrap par exemple et testé sur votre navigateur PC au fur et à mesure.

Test de la version mobile responsive du site internet

Vous êtes bien entendu fier de vous car sur votre pc, vous agrandissez et diminuez la fenêtre et votre site s'adapte parfaitement : génial non ? Et bien non !

Qu'elle n'est pas votre surprise en testant votre tout nouveau site web sur votre mobile, ou même sur google chrome par exemple en mode mobile, et oui, cela fait comme sur PC grand écran mais en tout petit avec de tous petits liens, bref impossible de naviguer dans ces conditions.

Pire quand c'est votre client qui vous appelle pour vous demander si vous ne vous fichez pas de lui car sur mobile c'est n'importe quoi son site !

L'erreur à ne pas faire pour tester votre site sur mobile

NE PAS TESTER votre site sur les émulateurs en ligne car ils forcent leur émulateur à rendre responsive le rendu !

Comment appliquer le responsive à toutes les tailles d'écrans

La première vérification à faire comme dit plus haut, c'est d'agrandir et de réduire sa fenêtre internet, cela prouve que votre code est bon et adapté aux mobiles, tablettes et autres grands écrans.

Code à modifier pour appliquer le responsive

Il suffit d'une balise à mettre dans votre code, et oui, une seule petite balise qui change absolument tout.

Juste après le "<head>"

Vous ajoutez la ligne ci-dessous et voilà tous les navigateurs web reconnaîtront le côté responsive de votre site :

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