Retina Afficher la taille de l'arrière-plan: couverture

Question

Si j'utilise la taille de fond: la couverture et je veux m'assurer que mon image est bonne sur un rétino macbook pro qui a une résolution de 2880x1880, dois-je juste faire l'image cette résolution, ou doit-elle être double cette résolution pour bien paraître parce que c'est la rétine (comme lorsque vous avez une image sur le site à 800px x 400px, mais affichée à 400px x 200px pour s'assurer qu'elle est bonne sur la rétine).

.bg { 
    color:#CCC; 
    background-attachment:fixed; 
    background-repeat: no-repeat; 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 
    background-size: cover; 
    margin: 0; 
    padding: 0; 
    } 

Merci beaucoup.

Answer 1

Rend les images approximativement à la résolution de l'appareil. Vous voudrez probablement ajuster un peu pour le navigateur/webclip chrome afin que la taille finale de l'image soit un peu différente.

Voir Custom Icon and Image Creation Guidelines pour plus d'informations.

Fond supplémentaire

dispositifs d'affichage de la rétine ont une devicePixelRation de 2 - qui est la ration de pixels physiques à l'appareil pixels indépendants. De quirks mode:

trempettes sont les pixels abstraites qui sont utilisés pour introduire des informations sur les requêtes de média largeur/hauteur et la méta dispositif de visualisation de largeur. Ils sont mieux expliqués en jetant un oeil à la différence entre la rétine et les dispositifs non-rétine.

Prendre l'iPad comme un exemple, si vous deviez définir la fenêtre à l'appareil de largeur vous rencontriez (Safari always uses DIPS - see quirksmode):

   DIPS  Physical 
       -------- --------- 
non-retina: 768x1024 768x1024 
    retina: 768x1024 1536x2048 

Vous LayOut votre balisage basé sur DIPS mais utiliser des images basé sur les pixels physiques (x2 dans le cas des affichages rétiniens).

Une autre façon de voir cela est: puisque la règle de base pour la rétine est 2x la taille d'une image non-rétine, utilisez 2x (768x1024) pour la rétine ou: 1536x2048

, méfiez-vous aussi du immobilier pris par navigateur chrome. Par exemple, la barre d'état prend 20px de l'écran global.