Wie erkennt man den Seitenzoom in allen modernen Browsern?

  1. Woran kann ich erkennen, die Seite zoom-Stufe in allen modernen Browsern? Während dieser thread erzählt, wie es in IE7 und IE8 kann ich nicht finden, ein gutes cross-browser-Lösung.
  2. Firefox speichert die Seite die Zoomstufe für den künftigen Zugang. Auf der ersten Seite zu laden, würde ich in der Lage sein, um die zoom-Stufe? Irgendwo habe ich gelesen es funktioniert, wenn ein zoom-änderung nach die Seite geladen wird.
  3. Gibt es eine Möglichkeit, die trap - 'zoom' Veranstaltung?

Ich brauche das, weil einige meiner Berechnungen sind pixel-basiert und Sie können schwanken, wenn vergrößert.

Geändert Probe gegeben durch @tfl

Dieser Seite alerts unterschiedliche Werte für die Höhe, wenn vergrößert. [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>

InformationsquelleAutor der Frage understack | 2009-11-11

  1. 253

    Nun ist es ein noch größeres Chaos als damals, als diese Frage war zunächst gefragt. Aus der Lektüre alle Antworten und blog-posts, die ich finden konnte, hier eine Zusammenfassung. Ich habe auch einrichten diese Seite auf test-all diese Methoden zur Messung der zoom-Stufe.

    Bearbeiten (2011-12-12): ich habe ein Projekt, das geklont werden kann: https://github.com/tombigel/detect-zoom

    • IE8: screen.deviceXDPI /screen.logicalXDPI (oder, für die zoom-Ebene im Verhältnis zu Standard-zoom, screen.systemXDPI /screen.logicalXDPI)
    • IE7: var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth; (Dank dieses Beispiel oder diese Antwort)
    • FF3.5 NUR: screen.width /media query, screen width (siehe unten) (die Tatsache zunutze, dass screen.width verwendet device-Pixel, aber MQ-Breite mit CSS-Pixel, die Dank der Quirksmode breiten)
    • FF3.6: keine bekannte Methode
    • FF4+: media queries binäre Suche (siehe unten)
    • WebKit: https://www.chromestatus.com/feature/5737866978131968 (Dank an Teo in den Kommentaren)
    • WebKit: Messen Sie die bevorzugte Größe eines div mit -webkit-text-size-adjust:none.
    • WebKit: (gebrochen seit r72591) document.width /jQuery(document).width() (Dank Dirk van Oosterbosch oben). Man-Verhältnis in Bezug auf die device-Pixel (statt relativ zum Standard-zoom), vermehren sich durch window.devicePixelRatio.
    • Alte WebKit? (unverified): parseInt(getComputedStyle(document.documentElement,null).width) /document.documentElement.clientWidth (aus diese Antwort)
    • Oper: document.documentElement.offsetWidth /Breite des position:fixed; width:100% div. von hier aus (Quirksmode breiten Tabelle sagt, es ist ein bug; innerWidth sollte CSS px). Wir verwenden die position:fixed element, um die Breite des Viewports einschließlich der Raum, in dem die scrollbars sind; Dokument.documentElement.clientWidth schließt diese Breite. Dieser ist gebrochen, seit irgendwann in 2011; ich kenne keinen Weg, um die zoom-Stufe in Opera nicht mehr.
    • Anderen: Flash-Lösung von Sebastian
    • Unzuverlässig: hören Sie auf Maus-events und Messen der Veränderung in screenX /ändern in clientX

    Hier ist eine binäre Suche für Firefox 4, da ich nicht weiß, der alle Variablen, denen er ausgesetzt ist:

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

    InformationsquelleAutor der Antwort yonran

  2. 42

    Für mich, für Chrome/Webkit, document.width /jQuery(document).width() hat nicht funktioniert. Wenn ich mein Fenster klein und vergrößert in meine Seite, so dass horizontale Scrollbalken erschien, document.width /jQuery(document).width() nicht gleich 1 bei der Standard-zoom. Dies ist, weil document.width umfasst einen Teil des Dokuments außerhalb des Viewports.

    Mit window.innerWidth und window.outerWidth gearbeitet. Für einige Grund in Chrom, outerWidth-gemessen in der Bildschirm-Pixel und innerWidth gemessen in css-Pixel.

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

    InformationsquelleAutor der Antwort user800583

  3. 31

    Können Sie versuchen,

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

    Dadurch erhalten Sie die browser-zoom-Prozentsatz.

    Fangen zoom-Ereignis, das Sie verwenden können,

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

    InformationsquelleAutor der Antwort user1080381

  4. 15

    Mein Kollege und ich haben das Skript von https://github.com/tombigel/detect-zoom. Darüber hinaus haben wir auch dynamisch erzeugt eine svg-element und überprüfen Sie seine currentScale Eigenschaft. Es funktioniert großartig auf Chrom und wahrscheinlich die meisten Browser auch. FF-die "zoom" nur text" - Funktion muss ausgeschaltet sein obwohl. SVG ist unterstützt in den meisten Browsern. Zum Zeitpunkt des Schreibens dieses Artikels, getestet unter IE10, FF19 und 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);

    InformationsquelleAutor der Antwort Jay

  5. 11

    Ich fand diesen Artikel sehr hilfreich. Riesen Dank an yonran. Ich wollte Euch auf einige zusätzliche lernen fand ich bei der Umsetzung einige der Techniken, die er zur Verfügung gestellt. In FF6 und Chrome 9, Unterstützung für media queries von JS Hinzugefügt wurde, die erheblich vereinfachen die media-query-Ansatz für die Bestimmung zoom im FF. Siehe die Dokumentation bei MDN hier. Für meine Zwecke, ich brauchte nur zu erkennen, ob der browser vergrößert oder verkleinert, ich hatte keine Notwendigkeit für den aktuellen zoom-Faktor. Ich war in der Lage, meine Antwort mit nur einer Zeile JavaScript:

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

    Verbindung mit dem IE8+ und Webkit-Lösungen, die waren auch die einzigen Zeilen, ich war in der Lage zu erkennen, Zoomen Sie auf die überwiegende Mehrheit der Browser treffen unsere app mit nur ein paar Zeilen code.

    InformationsquelleAutor der Antwort brianh

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

    Das ist alles, was Sie brauchen.

    InformationsquelleAutor der Antwort Alex von Thorn

  7. 3

    In Internet Explorer 7, 8 & 9, das funktioniert:

    function getZoom() {
    var screen;

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

    "+0.9" wird Hinzugefügt, um zu verhindern, dass die Rundungsfehler (sonst würden Sie erhalten, 104% und 109%, wenn der browser-zoom ist eingestellt auf 105% und 110%).

    Im IE6 zoom nicht vorhanden ist, so ist es unnötig zu prüfen, zoom.

    InformationsquelleAutor der Antwort pench

  8. 3

    Dieser gearbeitet hat ideal für mich, in webkit-basierten Browsern (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;
}

    Scheint nicht zu funktionieren, im Firefox aber.

    Funktioniert das auch in WebKit:

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

    InformationsquelleAutor der Antwort rudolfrck

  9. 2

    Habe ich eine Lösung für dieses wie Jan 2016. Getestet in Chrome, Firefox und MS-Edge-Browser.

    Das Prinzip ist wie folgt. Sammeln 2 MouseEvent Punkte, die weit auseinander liegen. Jeder Maus-event-kommt mit Bildschirm und Dokument-Koordinaten. Messen Sie den Abstand zwischen den 2 Punkten in beiden Koordinatensystemen. Es gibt zwar variable festen offsets zwischen den Koordinatensystemen durch die browser-Möbel, die Entfernung zwischen die Punkte sollten identisch sein, wenn die Seite nicht gezoomt. Der Grund für die Angabe "weit auseinander" (ich habe dies als 12 Pixel), so dass kleine zoom-änderungen (z.B. 90% oder 110%) nachweisbar sind.

    Referenz:
    https://developer.mozilla.org/en/docs/Web/Events/mousemove

    Schritte:

    1. Fügen Sie ein mouse move listener

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

    2. Capture 4 Messungen von Maus-events:

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

    3. Messen Sie den Abstand d_c zwischen den 2 Punkten in das client-system

    4. Messen Sie den Abstand d_s zwischen die 2 Punkte im Bildschirm system

    5. Wenn d_c != d_s dann zoom angewendet wird. Der Unterschied zwischen den beiden sagt, dass Sie die Menge an zoom.

    N. B. Nur die Entfernung Berechnungen nur selten, z.B. wenn Sie können, probieren Sie eine neue Maus-Ereignis, das weit von der vorigen.

    Einschränkungen: Nimmt Benutzer die Maus bewegen, zumindest ein wenig, und zoom ist unerkennbar bis zu diesem Zeitpunkt.

    InformationsquelleAutor der Antwort user1191311

  10. 1

    Ihre Berechnungen basieren noch auf eine Reihe von CSS-Pixeln. Sie sind einfach eine andere Größe auf dem Bildschirm jetzt. Das ist der Punkt der full page zoom.

    Was würden Sie wollen, zu geschehen, in einem browser auf einem 192dpi Gerät die deshalb in der Regel angezeigt, vier Geräte-Pixel für jedes pixel in einem Bild? Bei 50% zoom das Gerät zeigt jetzt einen Bildpunkt in einem Gerät-pixel.

    InformationsquelleAutor der Antwort Neil

  11. 1

    Was ich kam mit :

    1) position:fixed <div> mit width:100% (id=zoomdiv)

    2) wenn die Seite geladen wird :

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

    Und es funktionierte für mich für ctrl+ und ctrl- zoomt.

    oder kann ich die Zeile hinzufügen, um eine $(window).onresize() Veranstaltung, um die aktiven zoom-Stufe

    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. : dies ist mein Erster Beitrag, verzeihen keine Fehler

    InformationsquelleAutor der Antwort Abhishek Borar

  12. 0

    Nicht getestet für IE, aber wenn Sie ein element elem mit

    min-width: 100%

    dann 

    window.document.width / elem.clientWidth

    geben Sie Ihre browser-zoom-Stufe (einschließlich der document.body.style.zoom Faktor).

    InformationsquelleAutor der Antwort Dirk van Oosterbosch

  13. 0

    Dies ist für Chromeim Zuge der user800583 Antwort ...

    Ich verbrachte ein paar Stunden an diesem problem und habe nicht gefunden ein besserer Ansatz, aber :

    • Es gibt 16 'zoomLevel" und nicht 10
    • Wenn Chrome fullscreen/maximiert das Verhältnis ist window.outerWidth/window.innerWidthund wenn es nicht ist, das Verhältnis scheint (window.outerWidth-16)/window.innerWidth aber der 1. Fall lässt sich mit den 2.

    So kam ich zu den folgenden ...

    Doch dieser Ansatz hat Grenzen : zum Beispiel, wenn Sie spielen das Akkordeon mit der Anwendung Fenster (schnell vergrößern und verkleinern Sie die Breite des Fensters), dann erhalten Sie Lücken zwischen den zoom-Stufen, obwohl der zoom hat sich nicht geändert (kann sein, outerWidth und innerWidth sind nicht gerade aktualisiert, in der gleichen Zeit).

    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 ],
);

    Und wenn Sie möchten, dass der Faktor :

    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 ]
);

    InformationsquelleAutor der Antwort jeum

  14. 0

    Habe ich diese Lösung für mobile nur (getestet mit 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());

});

    Wenn Sie möchten, dass die zoom-Stufe direkt nach der Prise bewegen, werden Sie wahrscheinlich haben, um einen kleinen timeout, weil der rendering-delay (aber ich bin mir nicht sicher, weil ich nicht testen).

    InformationsquelleAutor der Antwort pmrotule

  15. 0
    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;
};

    InformationsquelleAutor der Antwort ali

  16. 0

    Grundsätzlich haben wir:

    • window.devicePixelRatio die berücksichtigt sowohl browser-Ebene zoom* sowie system-zoom - /pixel-Dichte.

      * — auf Mac/Safari zoom-Stufe nicht berücksichtigt
    • media queries
    • vw/vh CSS-Einheiten
    • resize Ereignis, das ausgelöst wird bei zoom-level zu ändern, dazu führen, dass effektive Größe des Fensters ändert

    das sollte genug sein für normalen UX. Wenn Sie brauchen, um festzustellen, zoom-Stufe, das wäre ein Zeichen der schlechten UI-design.

    Pitch-zoom ist schwieriger zu verfolgen, und ist nicht als derzeit.

    InformationsquelleAutor der Antwort kirilloid

  17. 0

    Diese Antwort basiert auf Kommentare über devicePixelRatio wieder kommen falsch auf user1080381 Antwort.

    Fand ich, dass dieser Befehl war auf dem Rückweg fälschlicherweise in einigen Instanzen auch bei der Arbeit mit einem desktop, Surface Pro 3 und Surface Pro 4.

    Was ich gefunden habe ist, dass es funktioniert auf meinem desktop, aber der SP3 und SP4 wurden, geben unterschiedliche zahlen von einander und den desktop.

    Bemerkte ich aber, dass das SP3 wurde wieder als 1 und eine halbe mal die zoom-Stufe, die ich erwarte. Als ich einen Blick auf die display-Einstellungen, das SP3 wurde eigentlich eingestellt, um 150% anstatt der 100% hatte ich auf meinem desktop.

    So, die Lösung für die Kommentare sollten zu teilen zurückgegeben zoom-Stufe durch die Skalierung der Maschine, an der Sie sich gerade befinden.

    War ich in der Lage, um die Skalierung in den Einstellungen von Windows, indem Sie Folgendes tun:

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

    So, in dem Fall von meinem SP3, dies ist, wie dieser code sieht bei 100% - zoom:

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

    Durch Multiplikation mit 100 in user1080381 ursprünglichen Antwort, dann würde Ihnen ein zoom von 100 (%).

    InformationsquelleAutor der Antwort Cameron Weaver

  18. 0

    Liegt das problem in der Art von monitor verwendet wird, ist ein 4k-monitor vs-standard-monitor. Chrome ist mit Abstand der Klügste in der Lage sind, uns zu sagen, was die zoom-Stufe ist nur durch die Verwendung window.devicePixelRatio er, offenbar kann sagen, was die Pixeldichte und Berichte zurück, die gleiche Nummer, egal was.

    Anderen Browsern, nicht so viel. IE und Edge sind wahrscheinlich das Schlimmste, als Sie mit der zoom-Stufen sehr unterschiedlich. Um die gleiche Größe von text auf einem 4k-monitor haben, müssen Sie 200% anstatt 100% auf einem standard-monitor.

    Mai 2018, hier ist, was ich habe, um zu erkennen, zoom-Stufen für ein paar von den gängigsten Browsern, Chrome, Firefox und IE11. Ich habe es mir sagen, was der Zoomfaktor ist. Für IE, meldet es 100% auch für 4k-Monitore, die sind eigentlich bei 200%, aber der text Größe ist wirklich der gleiche.

    Hier ist ein Turnschuh: https://jsfiddle.net/ae1hdogr/

    Wenn sich jemand kümmern würde, zu nehmen einen Stich an andere Browser und aktualisieren Sie die fiddle, dann tun Sie dies bitte. Mein Hauptziel war es, bekommen diese 3 Browser erfasst, um zu erkennen, wenn Menschen mit einem zoom-Faktor größer als 100%, um meine web-Anwendung und zeigt eine Benachrichtigung, die darauf hindeutet Vermieter zoom-Faktor.

    InformationsquelleAutor der Antwort Bill_VA

  19. 0

    Auf mobile Geräte (mit Chrome für Android oder Opera Mobile) können Sie erkennen, Zoomen Sie, indem Fenster.visualViewport.Maßstab.
    https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API

    Erkennen auf Safari: Dokument.documentElement.clientWidth /Fenster.innerWidth (gibt 1 zurück, wenn kein Zoomen auf dem Gerät).

    InformationsquelleAutor der Antwort JIm

  20. -1

    hier es nicht ändern!:

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

    erstellen Sie eine einfache html-Datei, klicken Sie auf die Schaltfläche. unabhängig davon, welchen zoom-level: es wird Ihnen zeigen, die Breite von 400px (zumindest mit firefox und ie8)

    InformationsquelleAutor der Antwort

  21. -1

    Dies kann oder kann nicht jedem helfen, aber ich hatte eine Seite, die ich nicht bekommen konnte, um Mitte richtig, egal welche Css-tricks habe ich versucht, also schrieb ich eine JQuery-Datei call-Center Seite:

    Das problem aufgetreten ist mit dem zoom-level des Browsers, die Seite würde sich wandeln, basierend auf, wenn Sie zu 100%, 125%, 150%, etc.

    Den folgenden code in ein JQuery-Datei namens centerpage.js.

    Von meiner Seite hatte ich einen link zu JQuery und diese Datei zu bekommen, es funktioniert, obwohl mein master-Seite bereits einen link mit 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();
});

    Auch wenn Sie wollen-center ein panel:

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

    InformationsquelleAutor der Antwort user1054326

  22. -1

    Diese Frage gepostet wurde, wie eine Ewigkeit zurück, aber heute, wenn ich war auf der Suche für die gleiche Antwort "zu erkennen, Wie zoom in und out-Ereignis", konnte ich nicht finden, eine Antwort, die passen würde allen Browsern.

    Als jetzt : Für Firefox/Chrome/IE8 und IE9 , der zoom in und out, feuert ein Fenster.resize-Ereignis.
    Diese kann erfasst werden über:

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

    InformationsquelleAutor der Antwort Bhumi Singhal

  23. -1

    Einen workaround für FireFox 16+ finden, DPPX (zoom-Stufe) rein mit 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);

    InformationsquelleAutor der Antwort lexasss

  24. -2

    Das ist gut:

    zoom = ( window.outerWidth - (window.outerWidth*0.1)  ) / window.innerWidth;

    InformationsquelleAutor der Antwort زياد

Schreibe einen Kommentar