Vous êtes ici : Blog > Programmation > Tester un site mobile avec Chrome

Tester un site mobile avec Chrome

2 commentaires

Chrome possède en effet une fonctionnalité intéressante (installée en natif) pour tester un site mobile sur le navigateur.

L'outil permet d'obtenir le rendu du site sur un support mobile et permet même de simuler les interactions du toucher "digital" (c'est-à-dire avec le doigt).

Accéder à la fonctionnalité :

Pour activer la fonctionnalité de rendu "en visualisation mobile", il faut aller dans le menu principal :

Plus d'outils > Outils de développement

 

Outils de développement sur Chrome

 

La barre de développement s'ouvre alors sur votre navigateur. Vous pouvez également utiliser le raccourci F12 pour l'afficher.

Device mode sur l'outil de dév. de Chrome

Tester votre site :

A partir de là, libre à vous de faire les tests que vous souhaitez. Vous pouvez définir plusieurs options :

  • Le choix du device ("Apple Iphone 6" sur le screenshot)
  • L'orientation ("Portrait" ou "Paysage")
  • La dimension de l'écran personnalisé (que vous pouvez donc définir manuellement)

Mobile viewport rendering sur Chrome

Si la barre d'avertissement jaune apparaît, c'est simplement pour vous indiquer qu'il faut recharger la page pour que l'affichage "mobile" soit bien pris en compte. Un petit coup de F5 la fera donc disparaître et l'affichage de votre site sera correct.

Enfin, comme je le disais en introduction, l'un des gros avantages est la prise en compte du "touch", c'est-à-dire que la pression de souris correspond alors à une pression avec votre doigt. C'est idéal pour tester certaines fonctionnalités de "slide" gauche/droite sur un carrousel par exemple.

Pression de la souris pour simuler la pression du doigt

футбольная обувь киев
купить мяч - 4football.com.ua
кухня под заказ - kamod.kiev.ua
http://emozzi.com.ua
 
Article publié le 19/03/2016 avec 267 Vues

2 commentaires :

  1. L’outil de Google Chrome est en effet très pratique. Depuis la version 49, le design est par contre un peu différent des screenshots que tu as mis. L’outil est devenu encore plus simple et pratique.

  2. Merci @Stéphane pour le complément d’info. Chrome n’était effectivement pas à jour avec la dernière version.

    Pour info, Google vient de sortir un nouvel outil permettant de tester un site responsive design : http://design.google.com/resizer/

Laissez un commentaire :