1485 sujets

Web Mobile et responsive web design

Images "floue" sur mobile

Bonjour a tous,

Apres avoir rendu mon site "responsive", je me rends compte que des petites icones ou autres sont "floues" sur mon iPhone. Comment pourrais-je resoudre ce soucis ?

Faut-il que je cree une image pour pc, et une image 2 fois plus grandes pour mobiles ?

Merci de votre aide !

Fanny
C'est un iPhone avec écran Retina? Tu peux essayer le svg ou prévoir une version haute résolution (2x la résolution) des fichiers bitmap.

Je fais comme ça pour cibler les navigateurs modernes (qui devrait être compatible svg) :

/*-----------------------------------------
Pour les navigateurs récents, images en svg
------------------------------------------*/

@media only all {
	/*css ici avec fichiers svg */

}


Les anciens navigateurs ne comprennent pas le mot clé ONLY et ne lisent pas les css. Smiley smile

Si tu utilises modernizr, tu peux utiliser la classe SVG ajoutée par le script sur <html>.

Pour la méthode avec les fichiers haute réso :
/*----------------
haute résolution
-------------------*/
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
  
  /* Retina-specific stuff here 
	 http://css-tricks.com/snippets/css/retina-display-media-query/
 

*/

}


P.S :la méthode avec les fichiers svg devrait être visible sur mon site mais mon hébergeur pédale à fond dans la semoule et c'est le thème par défaut qui est affiché pour l'instant (quand il veut bien s'afficher).
Modifié par Patidou (05 Nov 2012 - 11:40)
Coucou Patidou

Merci pour ta réponse.

Je ne connaissais SVG que de nom. Et je suis bien contente de connaitre cette technique maintenant ! J'ai donc recherche sur le web et suis tombee sur des sites sympa.
J'ai donc utiliser des icones SVG pour mon menu version mobile (sur ce site).

Je vais me renseigner voir si les <object> sont visibles sur tous les mobiles.

Merci de ton aide !
J'ai donc mis ma balise <object> directement dans le HTML.

<object data="<?= _IMG.'structure/svg-home.svg' ?>" width="31" height="31" type="image/svg+xml"></object>


Mais a ton avis, serait-il possible et est-ce que ça serait mieux : que je fasse un seul fichier svg avec mes 5 icones (methode sprites css), et que je les affiche en background dans le CSS ?
À l'heure actuelle, on peut utiliser svg avec img, c'est beaucoup plus simple. On peut aussi l'utiliser aussi en image de fond css. Il faut bien tester le rendu à cause l'antialiasing.

Tu parles de ton site de mannequin? Je jetterai un œil ce soir ou demain, là je suis un peu débordé. Smiley cligne
Ah cool =D Je vais donc faire une image (sprites CSS) au format SVG et l'afficher en CSS, ca sera beaucoup plus simple pour moi =D Je m'y pencherais dessus demain.
Je verrais bien le rendu a la fin. Je garderais mes images au cas ou.

Oui je travaille sur ce site la en ce moment. J'essaye de le perfectionner, version pc et mobile.

Merci tient moi au jus de comment tu trouves Smiley cligne
J'ai rajoute des icones SVG dans la navigation, ainsi que dans la page "Photos" les fleches a gauche des titres =D
Merci pour le lien j'avais deja visite ce site Smiley cligne
Il est top.
J'ai deja mis des icones svg sur 3 pages, et je ferais ce soir mon logo pour les ecrans retina (avec ta solution que tu as donne plus haut). Esperons que j'y arrive !
Sujet clos
Aller à