Comment détecter niveau de zoom page dans tous les navigateurs modernes?

  1. Comment puis-je détecter le niveau de zoom de la page dans tous les navigateurs modernes? Bien que ce thread indique comment le faire dans IE7 et IE8, Je ne peux pas trouver une bonne solution de cross-browser.

  2. Firefox stocke le niveau de zoom de la page pour un accès futur. Lors du chargement de la première page, est-ce que je pourrais obtenir le niveau de zoom? Quelque part je lis cela fonctionne quand un changement de zoom se produit après la page est charger.

  3. y a-t-il un moyen de piéger l'événement 'zoom' ?

j'en ai besoin parce que certains de mes calculs sont basés sur des pixels et ils peuvent fluctuer quand zoomé.

échantillon modifié donné par @tfl

cette page alerte différentes valeurs de hauteur lorsque zoomé. [jsFiddle] 

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"/></script>
    </head>
    <body>
        <div id="xy" style="border:1px solid #f00; width:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin tortor in lacus tincidunt volutpat. Integer dignissim imperdiet mollis. Suspendisse quis tortor velit, placerat tempor neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent bibendum auctor lorem vitae tempor. Nullam condimentum aliquam elementum. Nullam egestas gravida elementum. Maecenas mattis molestie nisl sit amet vehicula. Donec semper tristique blandit. Vestibulum adipiscing placerat mollis.</div>
        <button onclick="alert($('#xy').height());">Show</button>
    </body>
</html>
268
demandé sur Community 2009-11-11 11:16:55

23 réponses

maintenant c'est un gâchis encore plus grand que ce qu'il était quand cette question a été posée pour la première fois. En lisant toutes les réponses et les billets 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 .

Modifier (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 relatif au zoom par défaut, screen.systemXDPI / screen.logicalXDPI )
  • IE7 : var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth; (merci à cet exemple ou cette réponse )
  • FF3.5 SEULEMENT : screen.width / media query largeur de l'écran (voir ci-dessous) (tire parti du fait que screen.width utilise l'appareil de pixels, mais MQ largeur utilise les pixels CSS -- grâce à quirksmode widths )
  • FF3.6 : pas de méthode connue
  • FF4+ : recherche binaire sur les requêtes des médias (voir ci-dessous)
  • WebKit : https://www.chromestatus.com/feature/5737866978131968 (merci à Teo dans les commentaires)
  • WebKit : mesurer la taille d'un div avec -webkit-text-size-adjust:none .
  • WebKit : (cassé depuis r72591 ) document.width / jQuery(document).width() (merci à Dirk van Oosterbosch au-dessus de ). Pour obtenir le ratio en termes de pixels de périphérique (au lieu du zoom relatif par défaut), multipliez par window.devicePixelRatio .
  • Vieux WebKit? (non vérifié): parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth (de this answer )
  • Opéra : document.documentElement.offsetWidth / largeur d'une position:fixed; width:100% div. d'ici ( Quirksmode de largeurs de table dit que c'est un bug; innerWidth devrait être CSS px). Nous utilisons la position: élément fixe pour obtenir la largeur du viewport y compris l'espace où les barres de défilement sont ; document.documentElement.clientWidth exclut cette largeur. C'est cassé depuis 2011; je sais pas moyen d'obtenir le niveau de zoom à l'Opéra plus.
  • autres : solution Flash DE Sebastian
  • non fiable: écouter les événements de la souris et mesurer le changement dans screenX / changement dans clientX

Voici une recherche binaire pour Firefox 4, puisque je ne connais aucune variable où elle est exposée: 

<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>
257
répondu yonran 2018-02-06 14:18:50

pour moi, pour Chrome/Webkit, document.width / jQuery(document).width() n'a pas fonctionné. Quand j'ai fait ma fenêtre petite et zoomé dans mon site de sorte que les barres de défilement horizontales sont apparus, document.width / jQuery(document).width() n'a pas égalé 1 au zoom par défaut. Cela est dû au fait que document.width inclut une partie du document en dehors du viewport.

par window.innerWidth et window.outerWidth ouvrés. Pour une raison quelconque dans Chrome, la largeur de bande externe est mesurée en pixels d'écran et la largeur de bande interne est mesurée en pixels css. 

var screenCssPixelRatio = (window.outerWidth - 8) / window.innerWidth;
if (screenCssPixelRatio >= .46 && screenCssPixelRatio <= .54) {
  zoomLevel = "-4";
} else if (screenCssPixelRatio <= .64) {
  zoomLevel = "-3";
} else if (screenCssPixelRatio <= .76) {
  zoomLevel = "-2";
} else if (screenCssPixelRatio <= .92) {
  zoomLevel = "-1";
} else if (screenCssPixelRatio <= 1.10) {
  zoomLevel = "0";
} else if (screenCssPixelRatio <= 1.32) {
  zoomLevel = "1";
} else if (screenCssPixelRatio <= 1.58) {
  zoomLevel = "2";
} else if (screenCssPixelRatio <= 1.90) {
  zoomLevel = "3";
} else if (screenCssPixelRatio <= 2.28) {
  zoomLevel = "4";
} else if (screenCssPixelRatio <= 2.70) {
  zoomLevel = "5";
} else {
  zoomLevel = "unknown";
}
43
répondu user800583 2018-04-13 15:55:25

Vous pouvez essayer 

var browserZoomLevel = Math.round(window.devicePixelRatio * 100);

cela vous donnera le pourcentage de zoom du navigateur.

pour saisir l'événement zoom vous pouvez utiliser 

$(window).resize(function() { 
// your code 
});
38
répondu user1080381 2016-06-14 14:34:37

mon collègue et moi avons utilisé le script de https://github.com/tombigel/detect-zoom . En outre, nous avons aussi dynamiquement créé un élément svg et vérifié sa propriété currentScale. Il fonctionne très bien sur Chrome et probablement la plupart des navigateurs. Sur FF "zoom texte seulement" fonctionnalité doit être désactivée. SVG est pris en charge sur la plupart des navigateurs. Au moment de la rédaction du présent document, les tests ont été effectués sur IE10, FF19 et Chrome28. 

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('version', '1.1');
document.body.appendChild(svg);
var z = svg.currentScale;
... more code ...
document.body.removeChild(svg);
15
répondu Jay 2013-04-18 19:17:30

j'ai trouvé cet article extrêmement utile. Un grand merci à yonran. J'ai voulu transmettre un apprentissage supplémentaire que j'ai trouvé en mettant en œuvre certaines des techniques qu'il a fournies. Dans FF6 et Chrome 9, la prise en charge des requêtes médias DE JS a été ajoutée, ce qui peut grandement simplifier l'approche de requête média nécessaire pour déterminer le zoom dans FF. Voir le docs à MDN ici . Pour mes besoins, j'avais seulement besoin de détecter si le navigateur était zoomé ou Non, Je n'avais pas besoin de facteur de zoom réel. J'ai pu obtenir ma réponse avec une ligne de JavaScript: 

var isZoomed = window.matchMedia('(max--moz-device-pixel-ratio:0.99), (min--moz-device-pixel-ratio:1.01)').matches;

en combinant cela avec les solutions IE8+ et Webkit, qui étaient aussi des lignes simples, j'ai été en mesure de détecter zoom sur la grande majorité des navigateurs frapper notre application avec seulement quelques lignes de code.

11
répondu brianh 2011-11-07 18:11:52 
zoom = ( window.outerWidth - 10 ) / window.innerWidth

C'est tout ce dont tu as besoin.

10
répondu Alex von Thorn 2016-05-09 04:17:36

Dans Internet Explorer 7, 8 et 9, de cette marche: 

function getZoom() {
    var screen;

    screen = document.frames.screen;
    return ((screen.deviceXDPI / screen.systemXDPI) * 100 + 0.9).toFixed();
}

le" +0,9 " est ajouté pour éviter les erreurs d'arrondissement (sinon, vous obtiendriez 104% et 109% lorsque le zoom du navigateur est réglé à 105% et 110% respectivement).

dans IE6 zoom n'existe pas, il est donc inutile de vérifier le zoom.

3
répondu pench 2012-11-20 09:32:32

cela a très bien fonctionné pour moi dans les navigateurs webkit (Chrome, Safari): 

function isZoomed() {
    var width, mediaQuery;

    width = document.body.clientWidth;
    mediaQuery = '(max-width: ' + width + 'px) and (min-width: ' + width + 'px)';

    return !window.matchMedia(mediaQuery).matches;
}

Ne semble pas fonctionner dans Firefox.

cela fonctionne aussi dans WebKit: 

var zoomLevel = document.width / document.body.clientWidth;
3
répondu rudolfrck 2013-09-24 04:41:10

j'ai une solution pour cela à partir de janvier 2016. Testé dans les navigateurs Chrome, Firefox et MS Edge.

le principe est Le suivant. Collecter 2 points MouseEvent qui sont très éloignés. Chaque événement de la souris est livré avec l'écran et les coordonnées du document. Mesurer la distance entre les 2 points dans les deux systèmes de coordonnées. Bien qu'il existe des décalages variables fixes entre les systèmes de coordonnées en raison du mobilier du navigateur, la" distance 151960920 " entre les points devraient être identiques si la page n'est pas agrandie. La raison pour laquelle vous spécifiez "très éloigné" (12 pixels) est que les petits changements de zoom (par exemple 90% ou 110%) sont détectables.

référence: https://developer.mozilla.org/en/docs/Web/Events/mousemove

Suit:

  1. Ajouter un écouteur de mouvements de souris 

    window.addEventListener("mousemove", function(event) {
    // handle event
});

  2. Capturez 4 mesures à partir des événements de la souris: 

    event.clientX, event.clientY, event.screenX, event.screenY

  3. mesurer la distance d_c entre les 2 points du système client

  4. mesurer la distance d_s entre les 2 points dans le système d'écran

    5. "

  5. Si d_c != d_s puis zoom est appliqué. La différence entre les deux vous indique le niveau de zoom.

N.B. les calculs de distance sont rares, par exemple lorsque vous pouvez tester un nouvel événement de la souris qui est loin du précédent.

Limitations: suppose que l'utilisateur va déplacer la souris au moins un peu, et zoom est inconnu jusqu'à ce moment.

3
répondu user1191311 2017-03-22 14:52:46

Ce que j'ai trouvé est :

1) Faire un position:fixed <div> avec width:100% ( id=zoomdiv )

2) lorsque la page charge: 

zoomlevel=$("#zoomdiv").width()*1.0 / screen.availWidth

et ça a marché pour moi pour ctrl+ et ctrl- zooms.

ou je peux ajouter la ligne à un événement $(window).onresize() pour obtenir le niveau de zoom actif

Code: 

<script>
    var zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;

    $(window).resize(function(){
        zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;
        alert(zoom);    
    });
</script>
<body>
    <div id=zoomdiv style="width:100%;position:fixed;"></div>
</body>

P. S.: c'est mon premier poste, pardonnez les erreurs

2
répondu Abhishek Borar 2013-06-11 20:46:39

sur appareils mobiles (avec Chrome pour Android ou Opera Mobile), vous pouvez détecter zoom par fenêtre.visualViewport.l'échelle . https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API

Détecter sur Safari: document.documentElement.clientWidth / window.innerWidth (retourner 1 si aucun zoom sur le périphérique).

2
répondu JIm 2018-06-08 21:27:20

vos calculs sont toujours basés sur un certain nombre de pixels CSS. C'est juste une taille différente sur l'écran maintenant. C'est le but d'une pleine page de zoom.

Que voudriez-vous qu'il se passe sur un navigateur sur un périphérique 192dpi qui affiche donc normalement quatre pixels de périphérique pour chaque pixel d'une image? Avec un zoom de 50%, cet appareil affiche maintenant un pixel d'image dans un pixel d'appareil.

1
répondu Neil 2009-12-04 22:32:48

N'a pas testé cela pour IE, mais si vous faites un élément elem avec 

min-width: 100%

puis 

window.document.width / elem.clientWidth

vous donnera le niveau de zoom de votre navigateur (y compris le facteur document.body.style.zoom ).

0
répondu Dirk van Oosterbosch 2010-11-09 15:53:46

c'est pour Chrome , dans le sillage de user800583 réponse ...

j'ai passé quelques heures sur ce problème et n'ont pas trouvé une meilleure approche, mais :

  • Il y a 16 'zoomLevel' et pas de 10
  • quand le Chrome est plein écran/maximisé le rapport est window.outerWidth/window.innerWidth , et quand il n'est pas, le rapport semble être (window.outerWidth-16)/window.innerWidth , cependant le 1er cas peut être abordée par le 2e.

alors j'en suis arrivé à la suivante ...

mais cette approche a des limites : par exemple si vous jouez de l'accordéon avec la fenêtre d'application (agrandir rapidement et réduire la largeur de la fenêtre) alors vous obtiendrez des écarts entre les niveaux de zoom bien que le zoom n'a pas changé (peut-être outerWidth et innerWidth ne sont pas exactement mis à jour dans le même temps). 

var snap = function (r, snaps)
{
    var i;
    for (i=0; i < 16; i++) { if ( r < snaps[i] ) return i; }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
            [ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
);

et si vous voulez le facteur : 

var snap = function (r, snaps, ratios)
{
    var i;
    for (i=0; i < 16; i++) { if ( r < snaps[i] ) return eval(ratios[i]); }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
            [ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
            [ 0.25, '1/3', 0.5, '2/3', 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4, 5 ]
);
0
répondu jeum 2017-05-23 10:31:37

j'ai cette solution pour mobile seulement (testé avec Android): 

jQuery(function($){

zoom_level = function(){

    $("body").prepend('<div class="overlay" ' +
                'style="position:fixed; top:0%; left:0%; ' +
                'width:100%; height:100%; z-index:1;"></div>');

    var ratio = $("body .overlay:eq(0)").outerWidth() / $(window).width();
    $("body .overlay:eq(0)").remove();

    return ratio;
}

alert(zoom_level());

});

si vous voulez le niveau de zoom juste après le mouvement de pincement, vous devrez probablement mettre un peu de temps d'arrêt à cause du délai de rendu (mais je ne suis pas sûr parce que je ne l'ai pas testé).

0
répondu pmrotule 2014-07-09 18:22:09 
function supportFullCss3()
{
    var div = document.createElement("div");
    div.style.display = 'flex';
    var s1 = div.style.display == 'flex';
    var s2 = 'perspective' in div.style;

    return (s1 && s2);
};

function getZoomLevel()
{
    var screenPixelRatio = 0, zoomLevel = 0;

    if(window.devicePixelRatio && supportFullCss3())
        screenPixelRatio = window.devicePixelRatio;
    else if(window.screenX == '0')
        screenPixelRatio = (window.outerWidth - 8) / window.innerWidth;
    else
    {
        var scr = window.frames.screen;
        screenPixelRatio = scr.deviceXDPI / scr.systemXDPI;
    }

    //---------------------------------------
    if (screenPixelRatio <= .11){ //screenPixelRatio >= .01 &&
      zoomLevel = "-7";
    } else if (screenPixelRatio <= .25) {
      zoomLevel = "-6";
    }else if (screenPixelRatio <= .33) {
      zoomLevel = "-5.5";
    } else if (screenPixelRatio <= .40) {
      zoomLevel = "-5";
    } else if (screenPixelRatio <= .50) {
      zoomLevel = "-4";
    } else if (screenPixelRatio <= .67) {
      zoomLevel = "-3";
    } else if (screenPixelRatio <= .75) {
      zoomLevel = "-2";
    } else if (screenPixelRatio <= .85) {
      zoomLevel = "-1.5";
    } else if (screenPixelRatio <= .98) {
      zoomLevel = "-1";
    } else if (screenPixelRatio <= 1.03) {
      zoomLevel = "0";
    } else if (screenPixelRatio <= 1.12) {
      zoomLevel = "1";
    } else if (screenPixelRatio <= 1.2) {
      zoomLevel = "1.5";
    } else if (screenPixelRatio <= 1.3) {
      zoomLevel = "2";
    } else if (screenPixelRatio <= 1.4) {
      zoomLevel = "2.5";
    } else if (screenPixelRatio <= 1.5) {
      zoomLevel = "3";
    } else if (screenPixelRatio <= 1.6) {
      zoomLevel = "3.3";
    } else if (screenPixelRatio <= 1.7) {
      zoomLevel = "3.7";
    } else if (screenPixelRatio <= 1.8) {
      zoomLevel = "4";
    } else if (screenPixelRatio <= 1.9) {
      zoomLevel = "4.5";
    } else if (screenPixelRatio <= 2) {
      zoomLevel = "5";
    } else if (screenPixelRatio <= 2.1) {
      zoomLevel = "5.2";
    } else if (screenPixelRatio <= 2.2) {
      zoomLevel = "5.4";
    } else if (screenPixelRatio <= 2.3) {
      zoomLevel = "5.6";
    } else if (screenPixelRatio <= 2.4) {
      zoomLevel = "5.8";
    } else if (screenPixelRatio <= 2.5) {
      zoomLevel = "6";
    } else if (screenPixelRatio <= 2.6) {
      zoomLevel = "6.2";
    } else if (screenPixelRatio <= 2.7) {
      zoomLevel = "6.4";
    } else if (screenPixelRatio <= 2.8) {
      zoomLevel = "6.6";
    } else if (screenPixelRatio <= 2.9) {
      zoomLevel = "6.8";
    } else if (screenPixelRatio <= 3) {
      zoomLevel = "7";
    } else if (screenPixelRatio <= 3.1) {
      zoomLevel = "7.1";
    } else if (screenPixelRatio <= 3.2) {
      zoomLevel = "7.2";
    } else if (screenPixelRatio <= 3.3) {
      zoomLevel = "7.3";
    } else if (screenPixelRatio <= 3.4) {
      zoomLevel = "7.4";
    } else if (screenPixelRatio <= 3.5) {
      zoomLevel = "7.5";
    } else if (screenPixelRatio <= 3.6) {
      zoomLevel = "7.6";
    } else if (screenPixelRatio <= 3.7) {
      zoomLevel = "7.7";
    } else if (screenPixelRatio <= 3.8) {
      zoomLevel = "7.8";
    } else if (screenPixelRatio <= 3.9) {
      zoomLevel = "7.9";
    } else if (screenPixelRatio <= 4) {
      zoomLevel = "8";
    } else if (screenPixelRatio <= 4.1) {
      zoomLevel = "8.1";
    } else if (screenPixelRatio <= 4.2) {
      zoomLevel = "8.2";
    } else if (screenPixelRatio <= 4.3) {
      zoomLevel = "8.3";
    } else if (screenPixelRatio <= 4.4) {
      zoomLevel = "8.4";
    } else if (screenPixelRatio <= 4.5) {
      zoomLevel = "8.5";
    } else if (screenPixelRatio <= 4.6) {
      zoomLevel = "8.6";
    } else if (screenPixelRatio <= 4.7) {
      zoomLevel = "8.7";
    } else if (screenPixelRatio <= 4.8) {
      zoomLevel = "8.8";
    } else if (screenPixelRatio <= 4.9) {
      zoomLevel = "8.9";
    } else if (screenPixelRatio <= 5) {
      zoomLevel = "9";
    }else {
      zoomLevel = "unknown";
    }

    return zoomLevel;
};
0
répondu ali 2015-09-22 23:30:50

en gros, nous avons:

  • window.devicePixelRatio qui tient compte à la fois du zoom au niveau du navigateur* et de la densité du système zoom/pixel.

    * - le niveau de zoom Mac/Safari n'est pas pris en compte
  • media queries
  • vw / vh unités CSS
  • resize événement, qui est déclenché lors d'un changement de niveau de zoom, taille de la fenêtre change

cela devrait suffire pour normal UX. Si vous avez besoin de détecter le niveau de zoom qui pourrait être un signe de mauvaise conception de L'interface utilisateur.

Pitch-zoom est plus difficile à suivre et n'est pas considéré actuellement.

0
répondu kirilloid 2017-07-19 12:57:08

cette réponse est basée sur des commentaires à propos de devicePixelRatio revenant incorrectement sur la réponse de user1080381.

j'ai trouvé que cette commande revenait incorrectement dans certains cas aussi en travaillant avec un bureau, Surface Pro 3, et Surface Pro 4.

ce que j'ai trouvé est qu'il a fonctionné sur mon bureau, mais le SP3 et le SP4 donnaient des nombres différents de l'autre et le bureau.

j'ai remarqué que le SP3 je revenais à 1 fois et demi le niveau de zoom auquel je m'attendais. Quand j'ai regardé les paramètres d'affichage, le SP3 était en fait réglé à 150% au lieu des 100% que j'avais sur mon bureau.

ainsi, la solution aux commentaires devrait être de diviser le niveau de zoom retourné par l'échelle de la machine sur laquelle vous êtes actuellement.

j'ai pu obtenir la balance dans les réglages de Windows en faisant ce qui suit: 

ManagementObjectSearcher searcher = new ManagementObjectSearcher("SELECT * FROM Win32_DesktopMonitor");
double deviceScale = Convert.ToDouble(searcher.Get().OfType<ManagementObject>().FirstOrDefault()["PixelsPerXLogicalInch"]);
int standardPixelPerInch = 96;
return deviceScale / standardPixelPerInch;

ainsi dans le cas de mon SP3, voici comment ce code regarde 100% zoom: 

devicePixelRatio = 1.5
deviceScale = 144
deviceScale / standardPixelPerInch = 1.5
devicePixelRatio / (deviceScale / standardPixelPerInch) = 1

multiplié par 100 dans la réponse originale de user1080381 vous donnerait alors un zoom de 100 (%).

0
répondu Cameron Weaver 2017-10-26 17:17:54

le problème réside dans les types de moniteurs utilisés, un moniteur 4k vs un moniteur standard. Chrome est de loin le plus intelligent à pouvoir nous dire ce qu'est le niveau de zoom juste en utilisant window.devicePixelRatio , apparemment il peut dire ce qu'est la densité des pixels et rapporte le même nombre pour quoi que ce soit.

autres navigateurs, pas tellement. IE et Edge sont probablement les pires, car ils gèrent les niveaux de zoom de façon très différente. Pour obtenir la même taille de texte sur un moniteur 4k, vous avez pour sélectionnez 200%, au lieu de 100% sur un moniteur standard.

en date de mai 2018, voici ce que je dois détecter les niveaux de zoom pour quelques-uns des navigateurs les plus populaires, Chrome, Firefox, et IE11. Dites-moi quel est le pourcentage de zoom. Pour IE, il déclare 100% même pour 4k moniteurs qui sont en fait à 200%, mais la taille du texte est vraiment la même.

voici un violon: https://jsfiddle.net/ae1hdogr /

si n'importe qui voudrait prendre un coup à d'autres navigateurs et mettre à jour le violon, alors s'il vous plaît faites le. Mon but principal était d'obtenir ces 3 navigateurs couverts pour détecter si les gens utilisaient un facteur de zoom supérieur à 100% d'utiliser mon application web et d'afficher un avis suggérant un facteur de zoom locateur.

0
répondu Bill_VA 2018-05-25 17:33:31

ici ça ne change pas!: 

<html>
 <head>
  <title></title>
 </head>
<body>
 <div id="xy" style="width:400px;">
  foobar
 </div>
 <div>
  <button onclick="alert(document.getElementById('xy').style.width);">Show</button>
 </div>
</body>
</html>

créer un fichier html simple, cliquez sur le bouton. quel que soit le niveau de zoom: il vous montrera la largeur de 400px (au moins avec firefox et ie8)

-1
répondu 2009-11-12 10:17:54

cela peut ou peut ne pas aider n'importe qui, mais j'ai eu une page que je ne pouvais pas obtenir au centre correctement n'importe quels trucs Css j'ai essayé alors j'ai écrit un jQuery fichier appel Centre Page:

le problème s'est produit avec le niveau de zoom du navigateur, la page se déplacerait basé sur si vous étiez 100%, 125%, 150%, etc.

le code ci-dessous est dans un fichier JQuery appelé centerpage.js.

de ma page j'ai dû créer un lien vers JQuery et ce fichier pour l'obtenir travail, même si ma page principale avait déjà un lien vers JQuery. 

<title>Home Page.</title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/centerpage.js"></script>

centerpage.js : 

// centering page element
function centerPage() {
    // get body element
    var body = document.body;

    // if the body element exists
    if (body != null) {
        // get the clientWidth
        var clientWidth = body.clientWidth;

        // request data for centering
        var windowWidth = document.documentElement.clientWidth;
        var left = (windowWidth - bodyWidth) / 2;

        // this is a hack, but it works for me a better method is to determine the 
        // scale but for now it works for my needs
        if (left > 84) {
            // the zoom level is most likely around 150 or higher
            $('#MainBody').removeClass('body').addClass('body150');
        } else if (left < 100) {
            // the zoom level is most likely around 110 - 140
            $('#MainBody').removeClass('body').addClass('body125');
        }
    }
}


// CONTROLLING EVENTS IN jQuery
$(document).ready(function() {
    // center the page
    centerPage();
});

même si vous voulez centrer un panneau: 

// centering panel
function centerPanel($panelControl) {
    // if the panel control exists
    if ($panelControl && $panelControl.length) {
        // request data for centering
        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;
        var panelHeight = $panelControl.height();
        var panelWidth = $panelControl.width();

        // centering
        $panelControl.css({
            'position': 'absolute',
            'top': (windowHeight - panelHeight) / 2,
            'left': (windowWidth - panelWidth) / 2
        });

        // only need force for IE6
        $('#backgroundPanel').css('height', windowHeight);
    }
}
-1
répondu user1054326 2012-02-16 21:45:23

cette question a été postée comme des âges en arrière, mais aujourd'hui, quand je cherchais la même réponse" Comment détecter zoom avant et arrière événement", Je ne pouvais pas trouver une réponse qui conviendrait à tous les navigateurs.

Comme sur maintenant : Pour Firefox/Chrome/IE8 et IE9 , le zoom avant et arrière feux de la fenêtre.redimensionner l'événement. Cela peut être capturé en utilisant: 

$(window).resize(function() {
//YOUR CODE.
});
-1
répondu Bhumi Singhal 2012-12-06 13:54:11

une solution de contournement pour FireFox 16+ pour trouver dppx (niveau de zoom) purement avec JavaScript: 

var dppx = (function (precision) {
  var searchDPPX = function(level, min, divisor) {
    var wmq = window.matchMedia;
    while (level >= min && !wmq("(min-resolution: " + (level/divisor) + "dppx)").matches) {
      level--;
    }
    return level;
  };

  var maxDPPX = 5.0; // Firefox 22 has 3.0 as maximum, but testing a bit greater values does not cost much
  var minDPPX = 0.1; // Firefox 22 has 0.3 as minimum, but testing a bit smaller values does not cost anything
  var divisor = 1;
  var result;
  for (var i = 0; i < precision; i++) {
    result = 10 * searchDPPX (maxDPPX, minDPPX, divisor);
    maxDPPX = result + 9;
    minDPPX = result;
    divisor *= 10;
  }

  return result / divisor;
}) (5);
-1
répondu lexasss 2013-08-07 13:17:03