1485 sujets

Web Mobile et responsive web design

Bonjour,

l'iPhone 4 posséde une résolution de 640x960. Je souhaiterais profiter de cette resolution (HD) en affichant une image de 640px de large suivit d'un texte, de maniere a ce que cette image occupe toute la largeur de l'écran (en mode portrait donc).
Mais avec safari de l'iPhone4:
- lorsqu'on affiche une image de 640px de large (directement via son url, sans passer par une page HTML), cette image ne remplis pas l'écran mais seulement environ les 2/3.

- lorsqu'on encapsule l'image dans une balise IMG d'une page HTML, avec le viewport:
<meta name="viewport" content="width=device-width,maximum-scale=1,minimum-scale=1,initial-scale=1,user-scalable=no" /> l'image sort de l'écran

- lorsqu'on encapsule l'image dans une balise IMG d'une page HTML, avec le viewport:
<meta name="viewport" content="width=640,maximum-scale=1,minimum-scale=1,initial-scale=1,user-scalable=no" /> l'image sort aussi de l'écran.

Bref, je n'y comprends rien: comment faire afficher une image de 640 de large en pleine largeur d'écran (sans retailler l'image évidement afin de profiter de la HD) ?

Merci
Administrateur
Hello,

En fait, même si la résolution physique de l'iPhone4 est de 640px de large, son "device-width" est de 320px (comme l'iPhone3). De ce fait, si tu fixes la largeur avec width=device-width, il n'affichera que 320px de large et il est normal que l'image dépasse.

Pour ton premier test (image seule), il est possible qu'il la redimensionne comme les navigateurs classiques de bureau, pour que toute l'image apparaisse dans l'écran. Quelle est la hauteur de l'image ?

Ton 2è test confirme que le device-width est de 320px

Ton 3è test est plus étrange par contre, il faudrait que tu nous montres les codes en détail et le rendu observé.