@media non pris en compte sur iphone

Bonjour,

J'intègre une iframe sur les pages de mon site sous Wordpress.
Je souhaite adapter les dimensions de l'iframe selon la taille de l'écran du visiteur.

Pour cela j'ai mis l'iframe en width="100%" height="100%"
et j'ai mis en style:

.iframedevis { width: 300px; height: 840px; }
@media(min-width: 470px) { .iframedevis { width: 450px; height: 730px; } }
@media(min-width: 730px) { .iframedevis { width: 700px; height: 650px; } }

Quand je fais des tests sur le navigateur de mon ordinateur en mettant la fenêtre sous diverses tailles, cela fonctionne parfaitement.
Par contre, quand je teste sur mon iphone 4, la dimension de s'iframe n'est pas bonne.
Je suis étonné car j'ai utilisé le même code que pour dimensionner les blocs Adsense à la taille des écrans, et dans ce cas, ça fonctionne parfaitement...

Pouvez-vous m'aider?

Merci

Bonjour Raphael,

Merci pour votre réponse.
Je ne connaissais pas le viewport. Il faut savoir que je ne suis pas développeur. Je "bricole" pour adapter des solutions existantes à mes besoins.

Je viens de vérifier, dans mon thème (réalisé avec Artisteer), j'ai bien une balise meta viewport:

<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">

D'après ce que je comprends, la partie width = device-width devait faire en sorte que le width correspond à la surface en pixels CSS, donc pour mon iphone 4 : 320 pixels. Du coup, je ne sais toujours pas pourquoi mon code css n'est pas pris en compte pour mon téléphone...