Utilisation des media queries en javascript et remplacement d’images hidpi

Essais de remplacements d’images par la version hidpi (retina) mais sans avoir des fichiers plus lourds, l’astuce consiste à utiliser des images de moindre qualité sur la version HD (lire le billet de l'auteur de cette technique). Résultat : des images améliorées sur les écrans haute définition sans les inconvénients.

Pour bien détecter les media queries, j’utilise des <span> dans le <h1>, ceux-ci sont invisibles par défaut et sont rendus visibles suivant les conditions des MQ. Il « suffit » ensuite avec le script de tester la visibilité de ces spans pour savoir dans quel « mode » on se trouve.

Configuration de votre écran (ne s’adapte pas aux changements d'orientation)
Type Détection
hidpi/retina impossible
Tablette portrait impossible
Mobile impossible
Desktop impossible

Si détection = impossible, il est probable que javascript soit désactivé dans votre navigateur…

Hidpi

Si vous avez un écran retina, les photos ci-dessous devrait être remplacées par les versions en 800 px (mais dans 400 px de large).

Liège
Derrière le palais (Photo normale)
Bruxelles
La grand-place de Bruxelles (Photo normale)