[Résolu] Affichage plus large que l'écran mobile

Bonjour

Le sujet est pourtant mille et une fois traité sur le web et malgré tout, je ne parviens pas à mes fins :

J'ai un site web www.enveloppes-ardennes.com/essais/ qui s'affiche très bien sur écran pc mais qui, sur écran de smartphone, s'affiche de façon beaucoup plus large que l'écran ; seul le texte s'adapte !

Je crois avoir tout tenté et pense être passée à côté d'une consigne (oubli ou incompréhension).

Je ne mets pas de code ici et vous propose d'aller voir directement sur place.

Je vous remercie de votre aide !

Marie

Bonjour,

A priori le problème vient de tes input de la colonne de droite : leur width est à "auto" et par conséquent le navigateur leur impose une largeur.
Tu devrais leur forcer un max-width: 100%

De manière plus générale, en suivant la Méthodologie et la feuille de style de base pour le web mobile, ça devrait mieux se passer

Bonjour Raphaël et merci de ta réponse

Pour le coup, je pense que c'est moi qui ai la tête dans le "flux" depuis hier !

a écrit :
A priori le problème vient de tes input de la colonne de droite : leur width est à "auto" et par conséquent le navigateur leur impose une largeur.
Tu devrais leur forcer un max-width: 100%

Je n'obtiens pas non plus l'effet attendu

a écrit :
De manière plus générale, en suivant la Méthodologie et la feuille de style de base pour le web mobile, ça devrait mieux se passer

Et plein d'autres articles tous aussi intéressants. Je vais revoir ma copie (je dois avoir un soucis de compréhension moi !)

Je reste en attente de conseils !

Marie
Modifié par Marie08 (08 Jul 2012 - 08:02)

Je vais finir par croire que c'est mon Opera Mobile 10.0 sur HTC HD2 qui me joue des tours : les sites comme http://bostonglobe.com/ ou www.alsacreations.fr ont aussi un affichage qui dépassent la largeur de mon écran...

Lorsque j'utilise l'émulateur Opera, mon site s'affiche parfaitement comme attendu. D'autres émulateurs m'affichent n'importe quoi. Quant à www.emulateurmobile.com/, il m'affiche mon site avec la feuille de style www.enveloppes-ardennes.com

rendu sur émulateur Opera :



QR-code pour accéder au site :



Et sur vos mobiles, le site s'affiche comment svp ? Merci.

Marie
Modifié par Marie08 (08 Jul 2012 - 08:03)

Bonjour,

J'ai finalement opté pour une seule feuille de style regroupant les media queries pour grands et petits écrans.

Visiblement, le site s'adapte très bien sur plusieurs mobiles récents comme l'Iphone 4. Il n'y a que sur mon HTC HD2 avec la version 10 d'opera-mobile que le site reste plus large que l'écran.

Excellente semaine !

Marie