2010-09-06 15 views

Répondre

5

Je ne pense pas que l'astuce @2x fonctionne avec le contenu Web. Cela semble vraiment utile, je ferais certainement un bug avec Apple pour le demander.

Si vous générez le code HTML ci-dessus à partir de votre application, je pense que le meilleur moyen pour l'instant sera de détecter si vous utilisez un dispositif d'affichage Retina et d'ajuster le nom de l'image manuellement.

Vous pouvez détecter l'écran Retina en faisant quelque chose comme ceci:

if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)]) { 
    if ([[UIScreen mainScreen] scale] == 2) { 
     // Use high resolution images 
    } 
} 

(A pris ce code d'une réponse que je trouve ici SO)

+0

Merci. Je ne génère pas le code HTML à partir de l'application, mais je peux probablement avoir deux fichiers pathForResource différents et, en fonction du test ci-dessus, utiliser le fichier approprié. Je vais essayer. –

+0

Il est peu probable que cela se produise sans balise META (non standard) ou similaire - ce n'est pas une bonne idée de doubler le nombre de requêtes que vous envoyez à un serveur pour obtenir des images plus belles, surtout depuis la majorité des sites Web. sites) rendra à l'échelle 1/2 ou 1/3 de toute façon. –

+0

Pas encore fait, mais c'est l'approche que je prends. Je n'ai peut-être pas compris ce que signifiait "si vous générez le HTML de votre application" et j'ai donc pu induire en erreur tc. Le HTML réside dans mon bundle. C'est réparé; utilisé pour que l'application affiche du texte formaté dans une UIWebview. Aucun serveur impliqué. Je ne génère pas le HTML à la volée, donc je ne peux pas substituer un nom d'image et des dimensions différents, mais il est assez facile d'avoir un deuxième fichier HTML avec des références d'images et des dimensions haute résolution pour l'iPhone4. Décidez quel pathForResource utiliser. –

2

Actuellement, la meilleure façon de le faire est par le référencement vos images dans votre fichier CSS en utilisant la propriété background-image. Ensuite, vous pouvez utiliser un fichier CSS spécial chargé uniquement par des périphériques dotés d'écrans haute résolution pour remplacer ces propriétés.

Voir this blog post pour plus d'informations.

14

La façon de le faire est avec les arrière-plans CSS. Juste intégré tous vos trucs 2x dans une sous-section en CSS. La clé consiste également à définir la taille d'arrière-plan -webkit. Voici un exemple de la partie du CSS (à la fois rétine et non) pour une div avec l'ID Ampersand qui agit comme une image.

div#Ampersand { 
    background: url('AmpersandBurned.png'); 
    width:43px; 
    height:97px; 
    float:left; 
    -webkit-background-size: 43px 97px; 
} 

@media screen and (-webkit-device-pixel-ratio: 2) { 
    div#Ampersand { 
    background: url('[email protected]'); 
    width:43px; 
    height:97px; 
    float:left; 
    } 
} 
+1

Vous m'a sauvé l'homme! Je n'ai pas pu trouver la solution réelle de montrer des images Retina en CSS – Volatil3