Discussion :

[kap]

Bonjour,

Je développe un site dont le design doit s'adapter au device utilisé. J'ai un petit décalage d'une dizaine de pixels entre une version Iphone et une version desktop resizée à la largeur de l'Iphone (le breakpoint de la media queries est à width: 768px). Je n'arrive pas à trouver l'origine du problème... Voici l'URL du site :
http://wgs3.s3.amazonaws.com/perso/d...itinerary.html
Le décalage est au niveau du menu rétractable permettant la saisie d'adresses.

Merci d'avance pour votre aide.
Kap

[NoSmoking]

Bonjour,
je pense qu'il va falloir que tu sois plus précis quant au décalage car ce que je vois c'est plusieurs changement de taille et de position.

La question qui peut se poser c'est l’intérêt de passer du temps sur un détail que les utilisateurs de desktop en petite taille resizée ne verront pas si ils n'ont pas leur smartPhone à coté d'eux, et même si il le voient !?!

[kap]

Bonjour,

Merci d'avoir répondu. Dans le code mis en ligne, il y a effectivement des changements de taille et des changements de position. En voici la liste:

• décalage du menu sur la gauche de 23px pour cacher la bordure gauche
• taille du logo divisée par deux pour width<767px
• la taille des input passe de 300px à 130px pour width < 767px
• le menu en position rétracté à un décalage sur la gauche de 360px pour width > 768px
• le menu en position rétracté à un décalage sur la gauche de 190px pour width < 767px

C'est le dernier décalage qui me pose soucis. Le décalage laisse visible seulement les boutons avec les flèches (inversion des adresses et calcul d'itinéraires). Sur Iphone, le décalage n'est pas suffisant et l'on aperçoit un bout des boutons en forme de croix (reset de l'adresse).
J'ai trouvé une possibilité de contourner le problème en ajoutant des media queries pour cibler les Iphones:

Code css :

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

1
2
3
@media
(device-height : 568px) and (device-width : 320px) and (-webkit-min-device-pixel-ratio: 2),
(device-height : 480px) and (device-width : 320px) and (-webkit-min-device-pixel-ratio: 1)

mais ça ne me satisfait pas complètement... Je ne sais pas si ça impacte d'autres types d'appareils. J'aimerais avoir une solution plus générique.

/* Edit du message*/
Après quelques tests supplémentaire, le décalage apparaît également sur Ipad (testé sous Safari et Chrome) mais pas sous tablette Asus. Le problème semble spécifique aux Apple mobiles...

Kap