Une conversation entre développeurs qui dure depuis bientôt trois ans a abouti à ce code très pratique pour détecter n'importe quelle version d'Internet Explorer en JavaScript :

var ie = (function(){
    // for-loop saves characters over while
    for( var v = 3,
             // b just as good as a div with 2 fewer characters
             el = document.createElement('b'),
             // el.all instead of el.getElementsByTagName('i')
             // empty array as loop breaker (and exception-avoider) for non-IE and IE10+
             all = el.all || [];
         // i tag not well-formed since we know that IE5-IE9 won't mind
         el.innerHTML = '',
         all[0];
       );
    // instead of undefined, returns the documentMode for IE10+ compatibility
    // non-IE will still get undefined as before
    return v > 4 ? v : document.documentMode;
}() );

// Et en version minifiée
var ie=function(){for(var a=3,b=document.createElement("b"),c=b.all||[];b.innerHTML="",c[0];);return 4<a?a:document.documentMode}();

Si vous n'êtes pas dans Internet Explorer :

ie === undefined

Si vous êtes dans IE (>=5), vous pouvez connaitre la version exacte :

ie === 7; // IE7

La condition pour détecter IE revient donc à écrire :

if (ie) {}

Et pour connaitre les versions, on utilise les opérateurs JS classiques :

ie === 6 // IE6
ie > 7 // IE8, IE9 ...
ie < 9 // Toutes les versions inférieures à IE9    

Le problème du rendu des images sur les écrans à haute densité de pixels (Retina, chez Apple) est maintenant bien connu, ainsi que les techniques pour l’éviter.

Cependant, dans le cas d’une Google Map et des icônes (ou “marker”) qu’on peut lui associer, c’est un peu différent, du moins à première vue.

Voici la méthode pour rendre compatible les “custom icons” de l’API Google Maps avec les écrans à haute densité de pixels :

var markerIconVersion = (window.devicePixelRatio > 1.5) ? 'icon@2x.png' : 'icon.png';
var markerIcon = new google.maps.MarkerImage(markerIconVersion, null, null, null, new google.maps.Size(xx,xx));

// Déclaration du marker
marker = new google.maps.Marker({
    icon: markerIcon,
    // etc...
});

// Règle spécifique pour éviter un bug sur certaines version de l'API 
// cf : http://stackoverflow.com/questions/9208916/google-map-custom-markers-retina-resolution
if (window.devicePixelRatio > 1.5) {
    marker.setOptions({ optimized: false });
}

On a donc besoin de 2 icônes différentes :

• icon.png, destiné aux écrans normaux
• icon@2x.png, destiné aux écrans à haute densité de pixels. C’est simplement icon.png avec des dimensions multipliées par 2.

Ensuite, dans la déclaration de la variable markerIcon, on va donner les dimensions de icon.png à la déclaration new google.maps.Size(xx,xx).
L’image @2x sera donc redimensionnée à la taille de l’image normale et son rendu optimisé sur les écrans Rétina.