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

https://stackoverflow.com/questions/1713771

19-09-2019
|

Question

Comment puis-je détecter le niveau de zoom de page dans tous les navigateurs modernes? Bien que ce fil indique comment faire dans IE7 et IE8, je ne peux pas trouver une bonne solution cross-browser.
Firefox stocke le niveau de zoom page pour y accéder ultérieurement. Sur la première page charge, je serais en mesure d'obtenir le niveau de zoom? Quelque part je lis cela fonctionne quand un changement de zoom se produit après la page est chargée.
Est-il possible de piéger l'événement 'zoom'?

J'ai besoin parce que certains de mes calculs sont à base de pixels et ils peuvent varier en zoomant.

échantillon modifié donné par @tfl

Cette alerte de page différentes valeurs de hauteur lors d'un 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>

La solution

Maintenant, il est un encore plus grand désordre qu'il était quand cette question a été posée. De la lecture de toutes les réponses et les messages de blog que je pouvais trouver, voici un résumé. J'ai aussi 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 par rapport à défaut zoom, 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 largeur de l'écran de recherche (voir ci-dessous) (tire profit du fait que screen.width utilise des pixels de dispositif, mais la largeur MQ utilise des pixels CSS - grâce à largeurs Quirksmode )
FF3.6 : aucune méthode connue
FF4 + : les requêtes des médias recherche binaire (voir ci-dessous)
WebKit : https://www.chromestatus.com/feature/5737866978131968 (grâce à Teo dans les commentaires)
WebKit :. Mesurer la taille préférée d'un div avec -webkit-text-size-adjust:none
WebKit : (en panne depuis r72591 ) document.width / jQuery(document).width() (grâce à Dirk van Oosterbosch ci-dessus ). Pour obtenir le rapport en termes de pixels de dispositif (par rapport au lieu de faire défaut zoom), multiplier par window.devicePixelRatio.
Old WebKit (non vérifiées): parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth ( cette réponse )
Opera : document.documentElement.offsetWidth / largeur d'un position:fixed; width:100% div. d'ici ( table des largeurs de Quirksmode dit que c'est un bug, innerWidth devrait être px CSS). Nous utilisons la position: élément fixe pour obtenir la largeur de la fenêtre y compris l'espace où les barres de défilement sont ; document.documentElement.clientWidth exclut cette largeur. Ceci est cassé depuis quelque temps en 2011; Je ne connais pas moyen d'obtenir le niveau de zoom dans Opera plus.
Autre : solution Flash de Sebastian
Unreliable: écouter les événements de souris et mesurer les changements dans screenX / changement clientX

Voici une recherche binaire pour Firefox 4, puisque je ne connais pas une variable où 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>

Autres conseils

Vous pouvez essayer

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

Cela vous donnera navigateur niveau de pourcentage de zoom.

Pour attraper l'événement de zoom vous pouvez utiliser

$(window).resize(function() { 
// your code 
});

Pour moi, pour Chrome / Webkit, document.width / jQuery(document).width() ne fonctionnait pas. Quand je fait ma petite fenêtre et zoomé sur mon site tel que les barres de défilement horizontal est apparu, document.width / jQuery(document).width() n'a pas égal à 1 au zoom par défaut. En effet, document.width comprend une partie du document en dehors de la fenêtre.

Utilisation window.innerWidth et window.outerWidth travaillé. Pour une raison quelconque dans Chrome, outerWidth est mesurée en pixels de l'écran et innerWidth 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";
}

Mon collègue de travail et moi de https://github.com/tombigel/detect-zoom le script . De plus, nous avons également créé dynamiquement un élément svg et vérifier sa propriété currentScale. Il fonctionne très bien sur Chrome et probablement la plupart des navigateurs aussi. Sur FF la fonction « texte de zoom que » doit être désactivé si. SVG est pris en charge sur la plupart des navigateurs. Au moment où nous écrivons ces lignes, testé 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);

J'ai trouvé cet article extrêmement utile. Un grand merci à yonran. Je voulais transmettre un apprentissage supplémentaire j'ai trouvé en mettant en œuvre certaines des techniques qu'il a fournies. En FF6 et Chrome 9, le soutien aux questions des médias de JS a été ajouté, ce qui permet de simplifier considérablement l'approche des requêtes média nécessaire pour déterminer zoom FF. Voir la documentation à MDN . Pour mes besoins, je ne devais détecter si le navigateur a été agrandi ou, je n'avais pas besoin pour le facteur de zoom réel. J'ai pu obtenir ma réponse avec une ligne de code JavaScript:

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

En combinant ceci avec les solutions IE8 + et Webkit, qui étaient aussi des lignes simples, j'ai pu détecter zoom sur la grande majorité des navigateurs qui frappent notre application avec seulement quelques lignes de code.

zoom = ( window.outerWidth - 10 ) / window.innerWidth

C'est tout ce dont vous avez besoin.

J'ai une solution pour cela comme de Jan 2016. TESTE travaillant dans Chrome, Firefox et les navigateurs MS Edge.

Le principe est le suivant. Recueillir 2 points MouseEvent qui sont éloignés. Chaque événement de la souris est livré avec les coordonnées de l'écran et le document. Mesurer la distance entre 2 points dans les deux systèmes de coordonnées. Bien qu'il existe des décalages fixes variables entre les systèmes de coordonnées en raison du mobilier de navigateur, distance entre les points doivent être identiques si la page n'est pas zoomée. La raison de la spécification « éloignés » (je mets ce que 12 pixels) est pour 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

Étapes:

Ajouter un écouteur de déplacement de la souris

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

Capture 4 mesures à partir d'événements de souris:

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

Mesurer la distance D_C entre les 2 points dans le système client
mesurer la distance entre les d_s 2 points dans le système d'écran
Si D_C! = Zoom est alors d_s appliqué. La différence entre les deux vous indique la quantité de zoom.

N.B.. Seulement les calculs de distance rarement, par exemple quand vous pourrez déguster un nouvel événement de souris qui est loin d'être le précédent.

Limitations: Suppose utilisateur déplace la souris au moins un peu, et le zoom est inconnaissable jusqu'à ce moment

Dans Internet Explorer 7, 8 et 9, cela fonctionne:

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'arrondi (sinon, vous obtenez 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.

Qu'est-ce que je suis venu avec est:

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

2) lorsque la page se charge:

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

Et cela a fonctionné pour moi ctrl+ et ctrl- effectue un zoom avant.

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. Ceci est mon premier post, pardonner les erreurs

Cela a beaucoup travaillé pour moi dans les navigateurs basés sur 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 si.

Cela fonctionne aussi dans WebKit:

var zoomLevel = document.width / document.body.clientWidth;

En fait, nous avons:

window.devicePixelRatio qui tient compte à la fois du niveau de zoom du navigateur * ainsi que la densité de zoom du système / pixel.
* - le niveau de zoom Mac / Safari est pas pris en compte
requêtes médias
vw / vh unités CSS
événement resize, qui est déclenché lors d'un changement de niveau de zoom, provoque la taille effective des changements de la fenêtre

qui devrait être suffisant pour normale UX. Si vous avez besoin pour détecter le niveau de zoom qui pourrait être un signe d'une mauvaise conception de l'interface utilisateur.

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

vous pouvez détecter le zoom par window.visualViewport.scale appareils mobiles (avec Chrome pour Android ou Opera Mobile). https://developer.mozilla.org/en-US/docs/ Web / API / Visual_Viewport_API

Détection de Safari:. document.documentElement.clientWidth / window.innerWidth (retour 1 si aucun zoom sur l'appareil)

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

Qu'est-ce que vous voulez arriver sur un navigateur sur un périphérique qui 192dpi donc normalement affiché quatre pixels de l'appareil pour chaque pixel dans une image? A 50% zoom cet appareil affiche maintenant un pixel d'image dans un pixel de l'appareil.

On Chrome

var ratio = (screen.availWidth / document.documentElement.clientWidth);
var zoomLevel = Number(ratio.toFixed(1).replace(".", "") + "0");

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

min-width: 100%

puis

window.document.width / elem.clientWidth

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

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

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

Il y a 16 'zoomLevel' et non 10
Lorsque 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, mais le 1er cas peut être approché par le 2ème.

Alors je suis venu à ce qui suit ...

Mais cette approche a ses limites: par exemple, si vous jouez l'accordéon avec la fenêtre d'application (agrandissez rapidement et de réduire la largeur de la fenêtre), vous obtiendrez les é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 en 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 que 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 ]
);

J'ai cette solution pour mobile uniquement (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 droit de niveau de zoom après le déménagement de pincement, vous aurez sans doute de mettre un peu de délai d'attente en raison du retard de rendu (mais je ne suis pas sûr parce que je ne le tester).

Cette réponse est basée sur les commentaires au sujet de devicePixelRatio revenir de façon incorrecte sur la réponse de user1080381.

Je trouve que cette commande revenait à tort dans certains cas, trop lorsque vous travaillez avec un ordinateur de bureau, Surface Pro 3 et 4 Surface Pro.

Ce que je trouve que cela a fonctionné sur mon bureau, mais le SP3 et SP4 numéros différents ont donne de l'autre et le bureau.

J'ai remarqué cependant que le SP3 revient en 1 fois et demie le niveau de zoom que j'attendais. Quand je pris un regard sur les paramètres d'affichage, le SP3 a été effectivement mis à 150% au lieu de 100% que j'avais sur mon bureau.

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

Je suis en mesure d'obtenir l'échelle dans les paramètres Windows en procédant comme 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 ressemble à 100% zoom:

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

100 par Multiplying en réponse originale de user1080381 alors vous donner un zoom de 100 (%).

Avez-il travaille actuellement toutefois encore besoin de se séparer par le navigateur. Testé avec succès sur Chrome (75) et Safari (11.1) (n'ont pas trouvé moyen de FF pour l'instant). Il obtient également la valeur de zoom correcte sur l'affichage de la rétine et les calculs sont déclenchés sur événement Resize.

    private pixelRatio() {
      const styleString = "(min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 1.5),(-moz-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)";
      const chromeRatio = (Math.round((this.window.outerWidth / this.window.innerWidth)*100) / 100);
      const otherRatio = (Math.round(window.devicePixelRatio * 100) / 100);
      const resizeValue = (this.isChrome()) ? chromeRatio : otherRatio;

      return resizeValue || (this.window.matchMedia && this.window.matchMedia(styleString).matches ? 2 : 1) || 1;
    }


  private isChrome():boolean {
    return (!!this.window.chrome && !(!!this.window.opera || this.window.navigator.userAgent.indexOf(' Opera') >= 0))
  }

  private chrome() {
    const zoomChrome = Math.round(((this.window.outerWidth) / this.window.innerWidth)*100) / 100;
    return {
      zoom: zoomChrome,
      devicePxPerCssPx: zoomChrome1 * this.pixelRatio()
    };
  }

ici, il 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 simple fichier html, cliquez sur le bouton. quel que soit le niveau de zoom: il vous montrera la largeur de 400px (au moins avec Firefox et IE8)

Cela peut ou ne peut pas aider tout le monde, mais j'avais une page que je ne pouvais pas centrer correctement, peu importe ce que j'ai essayé des trucs Css j'ai donc écrit un fichier JQuery appel Centre Page:

Le problème est survenu avec le niveau de zoom du navigateur, la page se déplacerait en fonction de si vous étiez 100%, 125%, 150%, etc.

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

De ma page je devais créer un lien vers JQuery et ce fichier pour le faire fonctionner, 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();
});

Aussi, 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);
    }
}

est question a été publiée comme les âges de retour, mais aujourd'hui, quand je cherchais la même réponse « Comment détecter un zoom avant et à l'événement », je ne pouvais pas trouver une réponse qui correspondrait à tous les navigateurs.

Comme maintenant: Pour Firefox / Chrome / IE8 et IE9, le zoom et les incendies un événement window.resize. Cela peut être capturée à l'aide:

$(window).resize(function() {
//YOUR CODE.
});

Une solution de contournement pour FireFox 16+ trouver DPPX (niveau de zoom) uniquement 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);

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;
};

Le problème réside dans les types de moniteur utilisé, un moniteur 4K vs moniteur standard. Chrome est de loin le plus intelligent d'être en mesure de nous dire ce que le niveau de zoom est juste en utilisant window.devicePixelRatio, semble-t-il peut dire ce que la densité de pixels est et rend compte le même nombre à ce que la matière.

D'autres navigateurs, pas tant. IE et Edge sont probablement les pires, car ils gèrent très différemment les niveaux de zoom. Pour obtenir le texte même taille sur un écran 4K, vous devez sélectionner 200%, au lieu de 100% sur un moniteur standard.

En mai 2018, voici ce que je dois détecter les niveaux de zoom pour quelques-unes des navigateurs les plus populaires, Chrome, Firefox et IE11. Je l'ai me dire quel est le pourcentage de zoom est. Pour IE, il rend compte à 100%, même pour les moniteurs 4K qui sont en fait à 200%, mais la taille du texte est vraiment le même.

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

Si quelqu'un veut prendre soin de prendre un coup de couteau à d'autres navigateurs et mettre à jour le violon, alors s'il vous plaît le faire. Mon objectif principal était d'obtenir ces 3 navigateurs couverts pour détecter si les gens utilisaient un facteur de zoom supérieur à 100% à utiliser mon application Web et afficher un avis suggérant un facteur de zoom bailleur.

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow