Il est maintenant encore plus de désordre que c'est lorsque cette question est posée. À la lecture de toutes les réponses et les messages de blog que j'ai pu trouver, voici un résumé. J'ai également mis en place cette page pour tester toutes ces méthodes de mesure du niveau de zoom.
Edit (2011-12-12): j'ai ajouté un projet qui peut être cloné: https://github.com/tombigel/detect-zoom
-
IE8:
screen.deviceXDPI / screen.logicalXDPI (ou, pour le niveau de zoom par rapport à un zoom par défaut, screen.systemXDPI / screen.logicalXDPI)
-
IE7:
var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth; (grâce à cet exemple ou cette réponse)
-
FF3.5 UNIQUEMENT:
screen.width / media query largeur de l'écran (voir ci-dessous) (tire parti du fait que l' screen.width utilise l'appareil de pixels, mais MQ largeur utilise CSS pixels--merci à Quirksmode largeurs)
-
FF3.6: pas de méthode connue
-
FF4+: les requêtes de média binaire de recherche (voir ci-dessous)
-
WebKit: mesurer la taille d'un div avec
-webkit-text-size-adjust:none.
-
WebKit: (en panne depuis r72591)
document.width / jQuery(document).width() (merci à Dirk van Oosterbosch ci-dessus). Pour obtenir le ratio en termes de dispositif de pixels (au lieu de par rapport à un zoom par défaut), il faut multiplier par window.devicePixelRatio.
-
Vieux WebKit? (non vérifiées):
parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth (à partir de cette réponse)
-
Opéra:
document.documentElement.offsetWidth / largeur de la position:fixed; width:100% div. à partir d'ici (Quirksmode de largeurs de table dit que c'est un bug; innerWidth devrait être CSS px). Nous avons utiliser la position:élément fixe pour obtenir la largeur de la fenêtre d'affichage , y compris l'espace où les barres de défilement sont; document.documentElement.clientWidth exclut cette largeur. C'est en panne depuis quelque temps en 2011; je ne connais pas d'obtenir le niveau de zoom à l'Opéra plus.
-
Autres: Flash solution de Sebastian
- Peu fiable: écouter les événements de la souris et de mesurer le changement dans les screenX / changement de clientX
Voici une version binaire de recherche pour Firefox 4, car je ne connais pas de variable à laquelle il est exposé:
<style id=binarysearch></style>
<div id=dummyElement>Dummy element to test media queries.</div>
<script>
var mediaQueryMatches = function(property, r) {
var style = document.getElementById('binarysearch');
var dummyElement = document.getElementById('dummyElement');
style.sheet.insertRule('@media (' + property + ':' + r +
') {#dummyElement ' +
'{text-decoration: underline} }', 0);
var matched = getComputedStyle(dummyElement, null).textDecoration
== 'underline';
style.sheet.deleteRule(0);
return matched;
};
var mediaQueryBinarySearch = function(
property, unit, a, b, maxIter, epsilon) {
var mid = (a + b)/2;
if (maxIter == 0 || b - a < epsilon) return mid;
if (mediaQueryMatches(property, mid + unit)) {
return mediaQueryBinarySearch(
property, unit, mid, b, maxIter-1, epsilon);
} else {
return mediaQueryBinarySearch(
property, unit, a, mid, maxIter-1, epsilon);
}
};
var mozDevicePixelRatio = mediaQueryBinarySearch(
'min--moz-device-pixel-ratio', '', a, b, maxIter, epsilon);
var ff35DevicePixelRatio = screen.width / mediaQueryBinarySearch(
'min-device-width', 'px', 0, 6000, 25, .0001);
</script>
