1485 sujets

Web Mobile et responsive web design

Bonjour,
n'étant pas en possession de smartphones, j'aimerais savoir s'il existe certaines spécificités ergonomiques (taille des boutons...) liées à l'OS utilisé. Autrement dit est-ce que l'interface peut nécessiter certaines adaptations en fonction de l'OS, pour un même navigateur.

D'autre part je comprends pas le choix de l'Iphone 4 de conserver et forcer un device-width à 320px (sur les 640px disponibles). Est-ce qu'il y a une histoire de pixel density différent?
Modifié par Hermann (25 Apr 2012 - 09:42)
En Mobile First on conseille de ne pas toucher à la taille par défaut des caractères.

Pour ce qui est de l'iPhone 4(s), c'est normal, c'est pour rester compatible avec l'ancienne génération. Si tu veux le sélectionner spécifiquement (ou un Android dans les même conditions), tu dois en effet détecter la densité de pixels :

only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) 
Patidou a écrit :
En Mobile First on conseille de ne pas toucher à la taille par défaut des caractères.

Pour ce qui est de l'iPhone 4(s), c'est normal, c'est pour rester compatible avec l'ancienne génération. Si tu veux le sélectionner spécifiquement (ou un Android dans les même conditions), tu dois en effet détecter la densité de pixels :

only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) 


Salut Patidou, oui j'ai vu ça mais je trouve ça un peu lourd.
Je me demande s'il n'est pas plus léger de le détecter grâce au width du viewport-initial (qui est de 980px je crois) en déclarant le media.
Administrateur
Hermann a écrit :
Je me demande s'il n'est pas plus léger de le détecter grâce au width du viewport-initial (qui est de 980px je crois) en déclarant le media.

Le viewport de l'iphone 4 est le même que celui de l'iphone 3. Comment ferais-tu la différence ?

De plus, cela t'empêcherait d'appliquer un meta viewport avec la valeur width=device-width Smiley ohwell

A vrai dire, la seule vraie différence entre les 2 est la largeur physique (screen.width) et le ratio de pixels.
Modifié par Raphael (29 Apr 2012 - 19:05)
Raphael a écrit :

Le viewport de l'iphone 4 est le même que celui de l'iphone 3. Comment ferais-tu la différence

Iphone 3 ou 4 pour moi c'est pareil, c'est une Iphone quoi ^^ C'est toujours IOS de toute manière mais je n'avais effectivement pas pensé au ratio, va vraiment falloir que je franchise le cap des tests d'émulateurs...
D'autre part j'ai pas pensé au simple fait qu'on utilise pas forcément le navigateur embarqué
et qu'on peut très bien choisir d'utiliser Opera Mobile ou un autre browser, donc c'est pas valable.
Et je préfère éviter la détection de l'UA en JS, d'ailleurs j'ai compris que ce n'était pas conseillé sauf cas particulier.

Raphael a écrit :

De plus, cela t'empêcherait d'appliquer un meta viewport avec la valeur width=device-width Smiley ohwell

En remplaçant le meta viewport par une règle @viewport :
@viewport {
  width: device-width;
  zoom: 1;
}


...que je placerais après la règle @media pour que le width conserve la valeur initiale du viewport mais finalement c'es pas une bonne méthode.
De toute façon je n'ai rien trouvé sur le niveau d'implémentation de @viewport

D'ailleurs je viens de m'apercevoir qu'Opera mini et Symbian n'implémentent pas le meta viewport (peut-être faut-il passer par un @-o-viewport) Smiley ohwell (bien que le test ait 11 mois). Si tu as des infos là-dessus...
http://quirksmode.org/mobile/tableViewport.html#metaviewport
Modifié par Hermann (29 Apr 2012 - 23:45)
Administrateur
Hermann a écrit :
De toute façon je n'ai rien trouvé sur le niveau d'implémentation de @viewport

Oui sans surprise, puisque seul Opera supporte ce draft de spec actuellement. Donc c'est inutilisable en production.

Hermann a écrit :
D'ailleurs je viens de m'apercevoir qu'Opera mini et Symbian n'implémentent pas le meta viewport (peut-être faut-il passer par un @-o-viewport) Smiley ohwell (bien que le test ait 11 mois). Si tu as des infos là-dessus...

Nan mais franchement : Opera mini est très archaïque, de même que Symbian.
Inutile d'espérer faire des trucs un peu avancés avec eux.
Raphael a écrit :

Oui sans surprise, puisque seul Opera supporte ce draft de spec actuellement. Donc c'est inutilisable en production.

Ok merci pour l'info.

Raphael a écrit :

Nan mais franchement : Opera mini est très archaïque, de même que Symbian.
Inutile d'espérer faire des trucs un peu avancés avec eux.

Si la cible du site est uniquement française, Opera Mini n'est pas crutial mais avec un cible anglophone, il faut y penser.. Après je ne sais pas quel est la part d'Opera mini et mobile.
Modifié par Hermann (11 May 2012 - 13:30)
Opera mini est le navigateur le plus utilisé en Afrique, normal: il fonctionne sur des GSM basiques. Karl avait donné un lien avec les stats sur son blog chez Opéra je crois. Smiley cligne 😉
Patidou a écrit :
Opera mini est le navigateur le plus utilisé en Afrique, normal: il fonctionne sur des GSM basiques. Karl avait donné un lien avec les stats sur son blog chez Opéra je crois. Smiley cligne 😉

Salut,
Peter-Paul Koch expliquait dans sa conf. qu'il faut principalement tester sur Safari mobile, Android, Nokia (symbian je crois) et Opera mini.
http://www.dailymotion.com/video/xpqipc_the-mobile-browser-world_tech

Oui j'ai vu qu'Opera était très majoritairement utilisé au Nigéria (et pas que) avec une utilisation plus importante d'Opera mini !
Administrateur
Hermann a écrit :
Si la cible du site est uniquement française, Opera Mini n'est pas crutial mais avec un cible anglophone, il faut y penser.. Après je ne sais pas quel est la part d'Opera mini et mobile.

Je ne dis pas qu'il ne faut pas y penser, au contraire. Simplement qu'on ne peut pas appliquer des techniques modernes sur ces navigateurs, et que leurs possesseurs en ont sans doute conscience.

Pourquoi ne pas laisser les choses s'afficher d'elles-mêmes, sans mediaqueries ou artifices ?
Un peu comme on le fait pour d'autres vieux navigateurs (IE6 par ex) : ça fonctionne... mais ça fonctionne mieux chez les autres.