Discussion :

[kap]

Bonjour à tous !!

Je réalise mes premiers pas dans le développement de site web destinés aux appareils mobiles (smartphones et tablettes). Je vais avoir un IPhone à disposition, ce qui me permettra de tester l'affichage sur cet appareil uniquement. J'ai trouvé deux sites qui permettent d'émuler d'autres appareils : http://www.responsinator.com/ et http://testsize.com/. Que valent-ils? En utilisez-vous d'autres, que ce soit en ligne ou en version desktop?
Je compte utiliser les Media Queries pour affecter différents CSS selon l'appareil. Avez-vous de bonne pratiques de développement à me conseiller?

Merci d'avance pour votre aide !!

[Muchos]

Responsinator.com est en effet pas mal (en tout cas, il est régulièrement évoqué dans les tutos responsive, et ses rendus pour mon site correspondent à ce que j'ai constaté en conditions.)

Sur desktop, j'utilise principalement Opera Mobile Emulator. Là encore, le rendu correspond, et en plus il y a (un début d') émulation des conditions de navigation (toucher/glisser, pas d'hover, etc).

Avez-vous de bonne pratiques de développement à me conseiller?

Le récent tuto DVP sur le responsive a l'air très bien !

De mon côté, j'ajoute que :

• Je déclare les requêtes dans la css;
• Pour éviter les débordements, j'autorise le scroll : ou sur l'élément lui-même (ex: sur PRE), ou sur un conteneur (ex: sur une DIV entourant une TABLE);
• Mes dimensions correspondent à "margin + padding + border" :
  

  Code css :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
  3
  4
  5
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

• La section qui contient mes textes coupe éventuellement les mots pour réduire les décalages :
  

  Code css :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
  3
  4
  5
  6
  7
  8
  .text {
  	word-wrap: break-word;
  	overflow-wrap: break-word;
  	-webkit-hyphens: auto;
  	-moz-hyphens: auto;
  	-ms-hyphens: auto;
  	hyphens: auto;
  }

[kap]

Merci J'ai opté pour Opera Mobile Emulator, principalement parce que ma page html est stockée sur ma machine et pas sur un serveur web (même local)... Ca a l'air pratique

[Edit] Humm... Après des tests plus approfondis, Opera Mobile Emulator ne me satisfait pas complètement. L'affichage sur mon Iphone 5 et l'émulateur est complètement différent.