Précisions sur Media Queries + q° sur Opera iPhone

Salut.

Je commence à toucher au design réactif et me butte déjà à quelques questions. En voici 2 qui ne sont pas forcément en rapport.

1. Dans mon site, que je suis en train de refaire de fond-en-comble, j’ai commencé à spécifier des media queries pour cibler les largeurs d’écrans (dans la même f2styles que les CSS "standards") :

@media screen and (max-width: 640px) {
Mes CSS
}

-> cela marche parfaitement en redimensionnant mon navigateur de bureau (Safari, Opera ou Firefox)
-> cela marche parfaitement sur Opera Mini sur iPhone
-> cela ne donne rien sur Safari iPhone (3GS - iOS 5.1), il affiche la page en tout petit, comme une page de site ne gérant pas les smartphones). Il y a un truc que j’ai zappé ?

2. Quand je teste mon site sur Opera Mobile Emulator (merci Alsacréations pour l’article), les border-radius (sans spécifications de navigateurs) sont bien pris en compte. Quand je le teste sur Opera Mini sur iPhone, il ne sont pas pris en compte, avec ou sans spécifications de navigateurs (-o-). Est-ce à dire que l’Opera Mini pour iPhone a un sérieux retard sur les autres ?

Merci.

Regarde la css de mon site section "MOBILES".

Bonjour,

Avant de toucher aux Media Queries, tu as bien imposé ton Viewport à l'aide de la balise meta HTML du même nom ?

Sinon c'est normal : un iPhone (par exemple) considère qu'il a un Viewport (écran) de 980px de large.

Pour ta dernière question : Opera Mobile et Opera Mini sont deux navigateurs extrêmement différents. Et oui, Opera Mini est volontairement très minimaliste et en "retard" sur de nombreuses fonctionnalités HTML5 et CSS3.

Voici un tableau comparatif des supports de border-radius : http://caniuse.com/#feat=border-radius
Modifié par Raphael (08 Jun 2012 - 14:47)

Merci à vous deux pour les réponses.

Raphael a écrit :

Avant de toucher aux Media Queries, tu as bien imposé ton Viewport à l'aide de la balise meta HTML du même nom ?

C’est effectivement le genre de truc auquel je pensais quand je disais : « Il y a un truc que j’ai zappé ? ». J’ignorais ce "détail". Ce pourrait être intéressant de l’évoquer dans l’article d’Alsacréation sur les Média Queries…

a écrit :
Pour ta dernière question : Opera Mobile et Opera Mini sont deux navigateurs extrêmement différents. Et oui, Opera Mini est volontairement très minimaliste et en "retard" sur de nombreuses fonctionnalités HTML5 et CSS3.

Voici un tableau comparatif des supports de border-radius : http://caniuse.com/#feat=border-radius

OK. Du coup je suis un peu dubitatif sur l’intérêt d’Opera Mini : il fait moins bien que Safari (il est donc inutile à priori) et du coup donne une mauvaise image d’Opera, sans doute pas justifiée par ailleurs…

Encore merci.

Opéra mini est très utile quand la connexion est mauvaise vu que le contenu qu'il reçoit est très compressé. En fait ce n'est pas un vrai navigateur, le navigateur se trouve sur les serveurs d'opera et Mini est juste, en quelque sorte, une télécommande.

Il est surtout utile sur les non-smartphone où il est le navigateur numéro 1. C'est par exemple le navigateur le plus utilisé en Afrique.
Modifié par Patidou (09 Jun 2012 - 11:33)