[Résolu] Même affichage sur différents matériels

Bonjour,

Je sais que beaucoup de choses ont déjà été dites à ce sujet, mais il est difficile de faire le tri entre les solutions efficaces qui existent pour mon problème.

Mon site :

http://www.lespetitscailloux.eu

Ce que j'aimerais faire : Que mon site apparaisse sur smartphone, i-machin ou autre tablette comme sur mon Windows : Un fond d'écran avec une image fixe qui s'étend sur tout l'écran. Le corps du site centré sur la largeur. Et ce dès la connexion, peu importe si ce n'est pas lisible. A l'utilisateur de zoomer.

Ce qui se passe : OK sur Windows avec IE ou Firefox. Sur mon smartphone Android avec Firefox, il faut dé-zoomer pour visualiser le site sur sa largeur. Du coup, l'image de fond se décale à gauche en laissant du noir.

Ce que j'ai fait : Juste la balise meta :

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

Je ne l'ai mis que sur la page d'accueil, sur les autres pages, il y a des tests sans doute malheureux.

Merci pour votre aide.

Bonjour,

La réponse peut être très longue et vaste.

Il y a un gros boulot pour faire en sorte qu'un site soit "responsive" (s'adapte aux pc, tablette, smartphone).

Pour ce faire, il faut un développement optimisé, HTML 5 et CSS 3.

Donc si le site n'est pas responsive, par défaut l'utilisateur de smartphone va se diriger vers un pc si il veut vraiment en savoir plus.

C'est un avis personnel qui je pense sera pensé par d'autres personnes... ceci ne te donne pas de solution j'en suis conscient, mais je tenais a préciser mon opinion.

Faire un site en responsive design ne se limite pas à inclure simplement la balise meta viewport.

Plus d'explications sur le viewport : http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html

Ainsi que de la lecture qui pourra t'aider à comprendre : http://www.alsacreations.com/article/lire/1559-responsive-web-design-present-futur-adaptation-mobile.html

Je progresse. Cela fonctionne bien avec Opera Mobile, mais pas avec Firefox Mobile. J'ai juste ôté :

initial-scale=1.0

sur mes pages.

Je marque le problème comme résolu car cela fonctionne sur l'essentiel des navigateurs, même I-pad-pod-phone, sauf FireFox. Cela me suffit car le commun des mortels utilise la plupart du temps le navigateur fourni avec sa tablette et son smartphone.