Détecter le device-width en JavaScript, mission impossible ?
Suite à un billet récent constatant que le device-width (largeur d’écran d’un périphérique) diffère selon les navigateurs, j’ai souhaité pouvoir proposer un chargement conditionnel de mes feuilles de styles mobile voire de modifier la valeur de mon meta viewport.
Le principe est de détecter en JavaScript la valeur de device-width et de charger une feuille de style adaptée (par exemple : styles320.css, styles640.css, styles800.css, styles1024.css). Attention, je ne dis pas qu’il s’agit d’une bonne pratique, je souhaitais simplement tester cette possibilité d’adaptation.
Et là c’est le drame…
Car au final ni screen.width ni windows.innerWidth de JavaScript ne correspondent à device-width, c’est à dire la valeur indispensable pour s’adapter aux terminaux mobiles.
Pour parvenir à mes fins, j’ai rapidement créé une page HTML de test à laquelle il est possible d’accéder ici : http://bit.ly/device-width
Voici le contexte :
- application d’une meta viewport de valeur “width=device-width”
- détection du device-width à l’aide de CSS mediaqueries (@media (device-width) {})
- détection de screen.width ou windows.innerWidth via JavaScript et chargement d’une feuille de style correspondante (styles320.css, styles640.css, styles800.css ou styles1024.css)
J’ai pu constater que selon les terminaux, leur orientation et le navigateur employé, les deux valeurs ne coïncident pas ! Testez chez vous et n’hésitez pas à me faire vos retours.
Et si vous avez une solution magique, je suis preneur !
EDIT : Un nouveau challenger : window.matchMedia
Suite à la proposition d’Anthony, j’ai rajouté un troisième test dans la page : celui de window.matchMedia qui paraît prometteur puisqu’il correspond exactement à la valeur recherchée.
Le test en résumé ressemble à ça :
if (window.matchMedia("(min-width: 640px)").matches) {
document.write("device-width > 640px (window.matchMedia OK)");
}
Aux dernières nouvelles, les navigateurs mobiles Safari, Firefox et Android 3+ semblent supporter window.matchMedia, ce qui n’est pas le cas d’Opera (ni mobile ni mini). Pour IE mobile, je n’ai pas encore de retours.
