Résolution pour l iPhone

Bonjours, alors voilà mon problème je galère totalement a avoir une bonne résolution pour l iPhone ... Mon site sur ordi est génial est sur mon iPhone c est une galère ... J vous laisse jeter un œil et peut être trouver mon souci un grand merci !!

www.usgirlsc.ch

Bonjour et bienvenue,

Je vais être franc avec vous. Non votre site n'est pas "génial sur ordi" pour les raisons suivantes (qui j'espère vous aideront):

- sur Safari le contenu est complètement rétréci et bloqué à droite.
- des erreurs au validateur
- le logo (écusson) qui prend toute la page au rétrécissement de la page (enlever le width:auto à moins que cela soit voulu)
- des blocs avec des width en pixel sans points de rupture.

et puis la musique qui se lance au démarrage c'est épidermique pour beaucoup d'internaute (mais cet avis ne rentre pas dans le sujet)

Bon courage

Oui justement avec safari c'est une catastrophe essayé avec firefox vous verrez que sa change

Footeuse5 a écrit :
Oui justement avec safari c'est une catastrophe essayé avec firefox vous verrez que sa change

Non, pas vraiment

Je vais aller voir merci

des blocs avec des width en pixel sans points de rupture ??

Où est-ce que je les changes ?

Dans: @media (max-width: 640px){
@media (max-device-width:768px) and (orientation: landscape) {
@media screen and (min-width: 320px) and (max-width: 480px) {
@media screen and (orientation:portrait) {
@media screen and (orientation:landscape) {
ou @media screen and (min-device-width: 320px) ????


Merci de ta réponse

Je ne vais pas regarder votre code en détail car déjà pour vous répondre au premier post j'ai mis un peu de temps pour d'une part comprendre et ensuite répondre.

Je peux toutefois vous conseiller comme base de départ de cibler pas à pas les supports.
Exemple:

@media (max-width: 640px) 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)

C'est un exemple dans lequel j'ai ciblé Iphone et Ipad sur lesquels je peux tester les rendus.

GRAND MERCIIIII !!!

Grâce à toi j'ai fait un grand pas en avant.


PS: tu connais le site developpez.com ? Tu pourrais aller leur donner des cours et tu aiderais pas mal de monde !!

Ha ha content de vous avoir aidé.

Heu j'aurais une question par rapport à l'Iphone.

Tout fonctionne à part une chose: les sous-menus de mon menu principal.

Je n'arrive pas à cliquer sur le menu (où il y a un sous-menu) pour justement afficher le sous-menu. Lorsque je passe la souris sur le texte, le sous menu ne s'affiche pas.

Edit : erreur de ma part désolé.....
Modifié par rodolpheb (10 Apr 2013 - 23:09)

C'est le problème des menus avec sous-menus en responsive.

Une solution parmi d'autres est de s'orienter vers une solution comme celle-ci (il faut rétrécir la fenêtre jusqu'à apparition du nouveau menu)

Edit ??
Dsl mais je ne comprend pas...

Ah désolé réponse trop rapide...je viens de revoir votre nouvelle reponse.

Ce qui est étrange c'est que lorsque je suis sur la page d'accueil, il y a seulement le sous-menu qui s'affiche.
Après lorsque je vais sur les autres pages, aucun sous menu est cliquable.

Je teste sur Iphone et le sous-menu ne s'affiche pas chez moi.

C'est normal que le sous-menu ne s'affiche en responsive puisqu'il réagit au survol, comportement qui n'existe pas sur mobile.

Cet exemple n'est pas prévu pour des sous-menus ^^

Oh pas de chance --"