J'ai créé des icônes de taille 2 40px X 40px et 80px X 80px respectivement pour l'affichage normal et l'affichage de la rétine.rétine afficher les dimentions de l'image
Quelle est la bonne façon d'utiliser ces 2 tailles d'icônes? Je veux dire devrais-je changer les dimensions de l'élément pour la version rétine à 80px X 80px ou utiliser la propriété background-size pour ajuster les grandes icônes en taille 40px X 40px?
Vous devez suivre le Guide du contenu Web Safari d'Apple.
Cela dépend de la façon dont vous utilisez ces 'icônes'. S'agit-il d'icônes d'applications Web, d'images dans la page Web ou d'images d'arrière-plan? Tout d'abord, les images de la rétine doivent être nommées avec @ x2.e.g.
standard
sample.png
Retina
Pour les icônes d'applications web voir la réponse précédente de cpattersonv1
Contexte Images
Ceci peut être réalisé avec l'utilisation de requêtes des médias. Une requête multimédia pour cibler les périphériques compatibles avec la rétine ressemblerait à ceci. À partir de la requête média, vous pouvez ensuite spécifier votre image rétine pour l'image d'arrière-plan.
en utilisant @ x2 n'est pas obligatoire, nous pouvons utiliser n'importe quel nom d'image comme sample_ratina.png –
Votre réponse n'a pas répondu à ma requête, ai-je besoin de changer la taille de l'icône en CSS ou html pour travailler correctement dans l'affichage ratina? –
J'ai trouvé que je devais garder les mêmes dimensions en CSS pour les versions normale et ratina, et ajuster la grande image en dimension normale en utilisant la propriété background-size.
Ma question ne concerne pas Apple-Touch-Icon, il s'agit d'icônes d'images générales utilisées dans la page Web. –