Gérer facilement les écrans à haute densité (Retina)

Gérer facilement les écrans à haute densité (Retina)

Html5, CSS3, Javascript PHP, SQL Tutoriels

La gestion des images pour les écrans à haute densité (ou « Retina » chez Apple) peut se faire de plusieurs façons.
Beaucoup utilisent les feuilles de style pour gérer l’appel aux visuels en adéquation avec l’écran du client.

Ces feuilles de styles ressemblent en générale à quelque chose comme ça :

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    .monEntete{
        background-image: url('images/entete@2x.png');
    }
}

En soit, c’est la solution la plus « propre » étant donné que cela vous offre un contrôle total sur les éléments graphiques de votre application Web. Mais là où cette solution atteint ces limites, c’est quand vous avez un nombre important d’éléments graphiques à gérer. Et c’est ici qu’intervient l’automatisation.

En scrutant le Web, je suis tombé sur une méthode très simple et très facile à mettre en place. Cette méthode conciste à ajouter un tout petit script dans l’entête de vos pages qui aura pour fonction de créer un cookie permettant d’avertir le serveur si l’écran du client est à haute densité.

<script>
    if((window.devicePixelRatio===undefined?1:window.devicePixelRatio)>1)
        document.cookie='HTTP_IS_RETINA=1;path=/';
</script>

Ensuite, vient quelques lignes à ajouter dans le fichier .htaccess de votre site. Ces lignes les voici :

<IfModule mod_rewrite.c>
    Options -MultiViews
    RewriteEngine on
    # si un cookie a ete cree
    RewriteCond %{HTTP_COOKIE} HTTP_IS_RETINA [NC]
    # et qu'il n'y a pas la mention @2x dans l'image demandee
    RewriteCond %{REQUEST_FILENAME} !@2x
    # on redirige vers le même nom de l'image mais en version retina
    # (ex: monImage.png devient monImage@2x.png)
    RewriteRule ^(.*)\.(gif|jpg|png)$ $1@2x.$2 
    # mais si cette image n'exite pas sur le serveur
    RewriteCond %{REQUEST_FILENAME} !-f
    # on fait appel a la version classique
    RewriteRule ^(.*)@2x\.(gif|jpg|png)$ $1.$2
</IfModule>

Simple non ? Vous n’avez maintenant plus à vous soucier de vos CSS. Pour garantir l’affichage d’un visuel sur un écran « Retina », vous n’avez simplement qu’à créer une image aux dimensions doublées et à l’enregistrer au même niveau que l’image classique mais avec @2x à la fin du nom de l’image (ex: monImage.jpg => monImage@2x.jpg).

ps : N’oubliez pas de spécifier les dimensions de vos visuels dans votre document !

A propos de l'auteur

Commentaires

* KeywordLuv ! Entrez VotreNom@VosMotsClés dans le champ "Nom" pour bénéficier d'un mot-clef ciblé.