1478 sujets

Web Mobile et responsive web design

Bonjour,

Je voudrais savoir si le type de média "handheld, only screen and (max-device-width:640px)" pourra cibler l'iPhone malgré que ça sa résolution soit de 960x640 pixels.

Je voudrais aussi savoir pourquoi en dessous d'environ 310px de large, mon design n'est plus fluide.

Merci.
Administrateur
Hello,

Oui il sera ciblé car bien que sa largeur réelle soit de 640px, son "device-width" est de 320px comme l'iphone 3.
Et en paysage, son device-width est de 480px (toujours comme l'iphone 3)

Pour ta 2è question, impossible de deviner sans voir le site et le code, mais il y a forcément un élément qui a une composante qui "déborde" (width, margin, padding, border, etc.), ou alors il peut s'agir d'un élément de formulaire tel que textarea, ou encore un élément de code tel que pre.
Chok71 a écrit :
Bonjour,

Je voudrais savoir si le type de média "handheld, only screen and (max-device-width:640px)" pourra cibler l'iPhone malgré que ça sa résolution soit de 960x640 pixels.

Je voudrais aussi savoir pourquoi en dessous d'environ 310px de large, mon design n'est plus fluide.

Merci.


Pour cibler l'iphone 4, tu peux cibler son "pixel-ratio" (media query propriétaire). Voici celle sur mon site :

@media handheld, only screen and (max-device-width:500px), only screen and (max-width:500px), only screen and (-webkit-min-device-pixel-ratio: 2){…}
Raphael a écrit :
Oui il sera ciblé car bien que sa largeur réelle soit de 640px, son device-width est de 320px comme l'iphone 3.
Et en paysage, son device-width est de 480px (toujours comme l'iphone 3)

Sauf si l'on insère un
<meta name="viewport" content="width=device-width" />

je suppose.
Administrateur
Victor BRITO a écrit :

Sauf si l'on insère un
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot; /&gt;

je suppose.

ça ne changera rien : son device-width sera toujours de 320px (et 480px en paysage).
La meta ne fait qu'imposer l'affichage du viewport à la largeur de ce device-width, elle n'a aucune incidence sur les tests de media queries.
Raphael a écrit :
ça ne changera rien : son device-width sera toujours de 320px (et 480px en paysage).
La meta ne fait qu'imposer l'affichage du viewport à la largeur de ce device-width, elle n'a aucune incidence sur les tests de media queries.

Curieux... Au temps pour moi.