Wie erkennt man die Seitenzoomstufe in allen modernen Browsern?

310

Wie kann ich die Seitenzoomstufe in allen modernen Browsern erkennen? Während dieser Thread erklärt , wie es in IE7 und IE8 geht, kann ich keine gute browserübergreifende Lösung finden.
Firefox speichert die Seitenzoomstufe für den zukünftigen Zugriff. Kann ich beim Laden der ersten Seite die Zoomstufe ermitteln? Irgendwo habe ich gelesen, dass es funktioniert, wenn nach dem Laden der Seite eine Zoomänderung auftritt .
Gibt es eine Möglichkeit, das 'zoom'Ereignis abzufangen?

Ich brauche dies, weil einige meiner Berechnungen pixelbasiert sind und beim Zoomen schwanken können.

Modifiziertes Beispiel von @tfl

Diese Seite warnt beim Zoomen unterschiedliche Höhenwerte. [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>

javascript browser zoom detection Understack
quelle

1

Grundsätzlich möchte ich die Dimension eines DIV bei 100% Zoom kennen.

Understack

4

Grundsätzlich gibt es 2019 keine Möglichkeit, Zoom zu erkennen : Ich habe alle unten aufgeführten Lösungen auf Chrome 78 auf Mac Catalina getestet und keine davon hat funktioniert.

Collimarco

274

Jetzt ist es ein noch größeres Durcheinander als damals, als diese Frage zum ersten Mal gestellt wurde. Nach dem Lesen aller Antworten und Blog-Beiträge, die ich finden konnte, finden Sie hier eine Zusammenfassung. Ich habe diese Seite auch eingerichtet , um all diese Methoden zum Messen der Zoomstufe zu testen .

Bearbeiten (12.12.2011): Ich habe ein Projekt hinzugefügt, das geklont werden kann: https://github.com/tombigel/detect-zoom

IE8 : screen.deviceXDPI / screen.logicalXDPI(oder für die Zoomstufe relativ zum Standardzoom screen.systemXDPI / screen.logicalXDPI)
IE7 : var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth;(dank dieses Beispiels oder dieser Antwort )
NUR FF3.5 : screen.width/ Bildschirmbreite für Medienabfragen (siehe unten) (nutzt die Tatsache, dass Gerätepixelscreen.width verwendet werden, während die MQ-Breite CSS-Pixel verwendet - dank Quirksmode-Breiten )
FF3.6 : keine bekannte Methode
FF4 + : Medienabfragen binäre Suche (siehe unten)
WebKit : https://www.chromestatus.com/feature/5737866978131968 (danke an Teo in den Kommentaren)
WebKit : Messen Sie die bevorzugte Größe eines Div mit -webkit-text-size-adjust:none.
WebKit : (kaputt seit r72591 ) document.width / jQuery(document).width()(danke an Dirk van Oosterbosch oben ). Um das Verhältnis in Bezug auf Gerätepixel (anstelle des Standardzooms) zu erhalten, multiplizieren Sie mit window.devicePixelRatio.
Altes WebKit? (nicht verifiziert): parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth(aus dieser Antwort )
Oper : document.documentElement.offsetWidth/ Breite eines position:fixed; width:100%Div. von hier ( Quirksmodes Breitentabelle sagt, dass es ein Fehler ist; innerWidth sollte CSS px sein). Wir verwenden das Element position: fixed, um die Breite des Ansichtsfensters einschließlich des Bereichs zu ermitteln, in dem sich die Bildlaufleisten befinden . document.documentElement.clientWidth schließt diese Breite aus. Dies ist seit irgendwann im Jahr 2011 gebrochen; Ich kenne keine Möglichkeit mehr, die Zoomstufe in Opera zu erreichen.
Sonstiges : Flash-Lösung von Sebastian
Unzuverlässig: Hören Sie sich Mausereignisse an und messen Sie Änderungen in screenX / Änderungen in clientX

Hier ist eine binäre Suche nach Firefox 4, da ich keine Variable kenne, in der es verfügbar gemacht wird:

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

Yonran
quelle

1

Sehr gute Arbeit, obwohl dies bei mir in IE 8.0.7601.17514 (aktuell) nicht funktioniert. Gibt es eine Chance, all dies in einer einzigen Funktion getZoom () zusammenzufassen, die in allen Browsern funktioniert? Vielleicht auch als jQuery-Plugin veröffentlichen? Wieder gute Arbeit.

Ripper234

1

@yonran tolles Plugin!, Aber es funktioniert nicht in IE9 sollte es zoom: screen.deviceXDPI / screen.logicalXDPI,statt seinzoom: screen.systemXDPI / screen.logicalXDPI,

Daniel

1

@RobW, als ich dies zum ersten Mal für Firefox 4 schrieb, hatte Firefox keine matchMedia. Paul Irish hat auch eine ähnliche matchMedia-Polyfüllung geschrieben , die Teil von Modernizr ist .

Yonran

7

Gute Neuigkeiten alle zusammen! Sie haben es endlich geschafft! Vieport API! chromestatus.com/feature/5737866978131968 Ich teste es, großartiges Zeug!

Teo

3

Die Viewport-API funktioniert nur beim Pinch-Zoom. Wenn Sie auf dem Desktop zoomen, heißt es, dass der Maßstab 1 ist. @Jason T Featheringham Es gibt andere Gründe als "Diskriminierung", um die Zoomstufe wissen zu wollen. Der Zoom wird für alle Seiten einer Domain festgelegt. Möglicherweise möchten Sie ihn jedoch auf einer Spieleseite oder einem Erweiterungs-Popup anders behandeln als auf einer Hilfeseite.

Pudica

61

Du kannst es versuchen

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

Auf diese Weise erhalten Sie eine prozentuale Browser-Zoomstufe für Nicht-Retina-Displays. Bei Displays mit hoher DPI / Retina ergeben sich unterschiedliche Werte (z. B. 200 für Chrome und Safari, 140 für Firefox).

Zum Abfangen von Zoomereignissen können Sie verwenden

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

user1080381
quelle

1

Funktioniert perfekt, auch auf mobilen Geräten. Es ist auch sehr interessant zu sehen, welche mobilen Geräte was haben devicePixelRatio. Dies hat mir auch sehr geholfen, ein fixedElement auf ein absolutegenau positioniertes Element umzuschalten, wenn das Zoomereignis auftritt oder wenn sich der Anfangswert von devicePixelRatioÄnderungen ändert. Perfekt! Danke dir!!

Lowtechsun

12

Funktioniert nicht wie erwartet: Es wird 200 in Chrome auf einem MacBook mit Netzhaut zurückgegeben, wenn der Browser nicht gezoomt hat.

Terite

19

Browser mit Unterstützung für hochauflösende Bildschirme liefern bei Verwendung einer solchen Anzeige nicht das erwartete Ergebnis, ebenso wenig wie Safari, unabhängig von der Anzeige.

Fredrik C

Nur für alle, die sich interessieren, auf IE funktioniert dies nur auf IE11 (es wird NaN auf IE10 oder niedriger zurückgeben)

scunliffe

3

Math.round(window.devicePixelRatio * 100)funktioniert unter Chrome, IE, Edge und Firefox. Safari auf iMac gibt immer 200 zurück.

Super Jade

45

Für mich hat Chrome / Webkit document.width / jQuery(document).width()nicht funktioniert. Als ich mein Fenster klein machte und meine Site so vergrößerte, dass horizontale Bildlaufleisten document.width / jQuery(document).width()angezeigt wurden, war sie beim Standardzoom nicht gleich 1. Dies liegt daran, dass document.widthein Teil des Dokuments außerhalb des Ansichtsfensters enthalten ist.

Verwenden window.innerWidthund window.outerWidthgearbeitet. Aus irgendeinem Grund wird in Chrome die äußere Breite in Bildschirmpixeln und die innere Breite in CSS-Pixeln gemessen.

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

user800583
quelle

1

Sehr schön. Und wenn Sie nur wissen müssen, ob es in Chrome gezoomt ist oder nicht:isZoomed = (screenCssPixelRatio < .98 || screenCssPixelRatio > 1.02)

Brent Faust

1

Nun, window.outerWidth wird auch mit dem Zoom geändert. Außerdem beträgt die Fensterrahmenbreite nicht auf jedem Betriebssystem 8 Pixel (selbst unter demselben Betriebssystem kann das Design variieren). Ich würde jedoch vorschlagen, 16 und nicht 8 zu subtrahieren, da Sie die Fensterränder zweimal haben. Einige Browser haben einen Rand für das eigentliche Rendering-Fenster (wie FF) und andere nicht (Safari) - aber auch dies hängt davon ab, welches Betriebssystem Sie im Browser verwenden (z. B. hat Safari einen Rand für Windows). Das Sichern der anfänglichen inneren Breite (z. B. beim Laden der Seite) und das Vergleichen funktioniert besser, aber nur, wenn der anfängliche Zoom 100% betrug ...

StanE

1

Ausgänge 0 egal was für mich (2017, Februar).

Tiberiu-Ionuț Stan

1

switchAussage kann besser sein als viele wenn sonst Aussagen.

Edric

Es funktioniert nicht: Nur auf Chrome unter Mac getestet und es wird unabhängig von der

Zoomstufe

16

Mein Kollege und ich haben das Skript von https://github.com/tombigel/detect-zoom verwendet . Darüber hinaus haben wir dynamisch ein svg-Element erstellt und dessen currentScale-Eigenschaft überprüft. Es funktioniert hervorragend in Chrome und wahrscheinlich auch in den meisten Browsern. Bei FF muss die Funktion "Nur Text zoomen" jedoch deaktiviert sein. SVG wird in den meisten Browsern unterstützt. Zum Zeitpunkt dieses Schreibens auf IE10, FF19 und Chrome28 getestet.

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

Jay
quelle

Diese Methode meldet jetzt in Firefox 29 immer svg.currentScale = 1. Wahrscheinlich, weil sie die Größe der gesamten Bildschirmfiguren basierend auf dem Zoom ändern, was ein Fehler ist . IE11 scheint das gleiche Problem auf dem Desktop zu haben, da die Bildschirmhöhe an das Ansichtsfenstergerät PixelRatio angepasst ist, das ziemlich durcheinander ist.

Hexalys

11

Ich fand diesen Artikel enorm hilfreich. Vielen Dank an Yonran. Ich wollte einige zusätzliche Erkenntnisse weitergeben, die ich bei der Implementierung einiger der von ihm bereitgestellten Techniken gefunden hatte. In FF6 und Chrome 9 wurde die Unterstützung für Medienabfragen von JS hinzugefügt, wodurch der Ansatz zur Medienabfrage, der zum Bestimmen des Zooms in FF erforderlich ist, erheblich vereinfacht werden kann. Siehe die Dokumente bei MDN hier . Für meine Zwecke musste ich nur feststellen, ob der Browser vergrößert oder verkleinert wurde. Ich brauchte den tatsächlichen Zoomfaktor nicht. Ich konnte meine Antwort mit einer Zeile JavaScript erhalten:

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

In Kombination mit den IE8 + - und Webkit-Lösungen, bei denen es sich ebenfalls um einzelne Zeilen handelte, konnte ich bei den meisten Browsern, die unsere App mit nur wenigen Codezeilen erreichen, einen Zoom feststellen.

Brianh
quelle

4

Könnten Sie bitte einen Code angeben, wie der tatsächliche Zoom mithilfe einer Medienabfrage erkannt wird?

TN.

Versuchen Sie, nur "(Breite: <X> px) und (Höhe: <Y> px)" zu verwenden, wobei <X> und <Y> window.innerWidth bzw. window.innerHeight sind. Es funktioniert auch für sehr kleine Zoommengen. Funktioniert auch in Safari.

Max

@max Können Sie bitte einen JSFIddle- oder Beispielcode für die Zusammenstellung bereitstellen?

Lowtechsun

Meldet immer wahr auf Retina-Geräten wie MacBook Pro.

Matthew Sanders

codepen.io/anon/pen/LgrGjJ zeigt eine binäre Suche mit Medienabfragen an, dies entspricht jedoch der Abfrage devicePixelRatio: Dabei wird die Skalierung der Anzeige berücksichtigt.

ZachB

11

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

Das ist alles was du brauchst.

Alex von Thorn
quelle

Warum subtrahieren 10von outerWidth?

Callum

Wahrscheinlich für die Bildlaufleiste. Jede Bildlaufleiste ist auch anders, wie in iOS viel kleiner. Außerdem scheint diese Lösung nur Chrom zu sein

Sarah

1

Es funktioniert nicht, wenn der Benutzer eine Seitenleiste wie Lesezeichen in FF

Gerrit Sedlaczek

7

Ab Januar 2016 habe ich eine Lösung dafür. Getestet in Chrome-, Firefox- und MS Edge-Browsern.

Das Prinzip ist wie folgt. Sammle 2 weit voneinander entfernte MouseEvent-Punkte. Jedes Mausereignis enthält Bildschirm- und Dokumentkoordinaten. Messen Sie den Abstand zwischen den beiden Punkten in beiden Koordinatensystemen. Obwohl es aufgrund der Browsermöbel variable feste Offsets zwischen den Koordinatensystemen gibt, ist der Abstand zwischen den Punkten identisch sein, wenn die Seite nicht gezoomt wird. Der Grund für die Angabe von "weit auseinander" (ich habe dies als 12 Pixel angegeben) ist, dass kleine Zoomänderungen (z. B. 90% oder 110%) erkennbar sind.

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

Schritte:

Fügen Sie einen Mausbewegungs-Listener hinzu

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

Erfassen Sie 4 Messungen von Mausereignissen:

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

Messen Sie den Abstand d_c zwischen den beiden Punkten im Client-System
Messen Sie den Abstand d_s zwischen den beiden Punkten im Bildschirmsystem
Wenn d_c! = D_s ist, wird der Zoom angewendet. Der Unterschied zwischen den beiden gibt den Zoombetrag an.

Hinweis: Entfernungsberechnungen werden nur selten durchgeführt, z. B. wenn Sie ein neues Mausereignis abtasten können, das weit vom vorherigen entfernt ist.

Einschränkungen: Angenommen, der Benutzer bewegt die Maus mindestens ein wenig und der Zoom ist bis zu diesem Zeitpunkt nicht erkennbar.

user1191311
quelle

1

Ich habe eine Geige erstellt: jsfiddle.net/Terite/9b6ko854 mit "weit auseinander" als 100 Pixel. Leider funktioniert es unter Firefox (52) auf einem MacBook mit Retina-Display instabil. Es sollte auch beachtet werden, dass der Windows 7-Oberflächenzoom 125% in Chrome, Firefox und IE11 (in Zoom 125%, was dann Standard ist) als Browserzoom erkannt wird.

Terite

Ihre Geige funktioniert für mich, getestet in Linux mit Firefox und Chrome :)

user1191311

Retina-Displays bieten einen weiteren Schwierigkeitsgrad, da sie unter anderem die Pixelgrößen falsch angeben.

user1191311

5

Sie können die Visual Viewport-API verwenden :

window.visualViewport.scale;

Es ist Standard und funktioniert sowohl auf dem Desktop als auch auf dem Handy: Browser-Unterstützung .

Collimarco
quelle

Sieht praktisch aus, ist jedoch auf dem Firefox-Desktop standardmäßig deaktiviert und funktioniert ab dem 31.05.20 in Internet Explorer nicht mehr.

derekbaker783

3

In Internet Explorer 7, 8 und 9 funktioniert dies:

function getZoom() {
    var screen;

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

"+0.9" wird hinzugefügt, um Rundungsfehler zu vermeiden (andernfalls würden Sie 104% und 109% erhalten, wenn der Browser-Zoom auf 105% bzw. 110% eingestellt ist).

In IE6 ist der Zoom nicht vorhanden, daher ist es nicht erforderlich, den Zoom zu überprüfen.

Pench
quelle

1

Interessant. Für mich werden immer 80% des Zooms angezeigt ... Ich glaube, das liegt daran, dass ich große Schriftarten auf Windows 7-Ebene eingerichtet habe (suchen Sie in der Systemsteuerung nach "Schriftgröße"). Es ist besser als die IE8-Lösung in @ yonrans Antwort, die bei mir überhaupt nicht funktioniert hat. jsbin.com/obowof

ripper234

Ich erhalte 101%, wenn der Zoom auf 100% eingestellt ist.

Allen Wallace

ich auch. Verwenden Sie 0,4999 anstelle von 0,9

Yan Bellavance

ieZoomLevel = ((screen.deviceXDPI / screen.systemXDPI) * 100 + 0,4999) .toFixed ();

Yan Bellavance

3

Was ich mir ausgedacht habe ist:

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

2) wenn die Seite geladen wird:

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

Und es hat bei mir funktioniert ctrl+und ctrl-zoomt.

oder ich kann die Linie zu einem $(window).onresize()Ereignis hinzufügen , um die aktive Zoomstufe zu erhalten

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>

PS: Dies ist mein erster Beitrag, entschuldigen Sie etwaige Fehler

Abhishek Borar
quelle

3

Leider funktioniert dies nur, wenn der Benutzer den Browser maximiert hat (gibt screen.availWidthdie Breite des Bildschirms in Bildschirmpixeln an, nicht das Browserfenster).

Bailey Parker

3

Dies hat in Webkit-basierten Browsern (Chrome, Safari) hervorragend funktioniert:

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 in Firefox allerdings nicht zu funktionieren.

Dies funktioniert auch in WebKit:

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

rudolfrck
quelle

5

document.widthkehrt undefiniert zurück

Adam

Gibt unabhängig vom Zoom immer true zurück (2017, Februar, Retina-Anzeige).

Tiberiu-Ionuț Stan

3

Grundsätzlich haben wir:

window.devicePixelRatioDies berücksichtigt sowohl den Zoom * auf Browserebene als auch den Systemzoom / die Pixeldichte.
* - Bei Mac / Safari wird die Zoomstufe nicht berücksichtigt
Medien-Anfragen
vw/ vhCSS-Einheiten
resize Ein Ereignis, das beim Ändern der Zoomstufe ausgelöst wird, bewirkt eine effektive Größe der Fensteränderungen

das sollte für normales UX ausreichen . Wenn Sie die Zoomstufe erkennen müssen, kann dies ein Zeichen für ein schlechtes UI-Design sein.

Pitch-Zoom ist schwieriger zu verfolgen und wird derzeit nicht berücksichtigt.

Kirilloid
quelle

1

window.devicePixelRatio ist eine gute Antwort, die in der neuesten Version der wichtigsten Browser funktioniert - Chrome, Safari, FF, Edge, IE

DShultz

@kirilloid Haben Sie etwas gefunden, mit dem Sie die "Zoomstufe" in Safari zuverlässig finden können?

Onassar

2

Auf Mobilgeräten (mit Chrome für Android oder Opera Mobile) können Sie den Zoom anhand von window.visualViewport.scale erkennen . https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API

Auf Safari erkennen: document.documentElement.clientWidth / window.innerWidth (1 zurückgeben, wenn das Gerät nicht gezoomt wird).

JIm
quelle

1

Ihre Berechnungen basieren immer noch auf einer Reihe von CSS-Pixeln. Sie haben jetzt nur eine andere Größe auf dem Bildschirm. Das ist der Punkt des Ganzseiten-Zooms.

Was möchten Sie in einem Browser auf einem 192-dpi-Gerät tun, das daher normalerweise vier Gerätepixel für jedes Pixel in einem Bild anzeigt? Bei 50% Zoom zeigt dieses Gerät jetzt ein Bildpixel in einem Gerätepixel an.

Neil
quelle

@Neil: Wie kann ich die Abmessungen von CSS-Pixeln ermitteln?

Understack

CSS verwendet standardmäßig Punkte, aber Sie können Pixel natürlich mit dem Modifikator px dimension angeben. In JavaScript abgerufene Elementeigenschaften sollten bereits in CSS-Pixeln vorliegen. Wenn Sie also die Breite eines <div> auf 100px festlegen, erhalten Sie JavaScript unabhängig von der Zoomstufe zurück.

Neil

1

Auf Chrome

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

Nicolas Giszpenc
quelle

1

Funktioniert nur, wenn das Browserfenster die volle Bildschirmbreite hat.

Tenbits

0

Habe dies nicht für IE getestet, aber wenn du ein Element elemmit machst

min-width: 100%

dann

window.document.width / elem.clientWidth

gibt Ihnen die Zoomstufe Ihres Browsers (einschließlich des document.body.style.zoomFaktors).

Dirk van Oosterbosch
quelle

Getestet, aber das Vergrößern scheint elem.clientWidth

Tom

0

Dies ist für Chrome im Anschluss an die Antwort von user800583 ...

Ich habe ein paar Stunden mit diesem Problem verbracht und keinen besseren Ansatz gefunden, aber:

Es gibt 16 'zoomLevel' und nicht 10
Wenn Chrome Vollbild / maximiert ist window.outerWidth/window.innerWidth, ist das Verhältnis , und wenn dies nicht (window.outerWidth-16)/window.innerWidthder Fall ist, scheint das Verhältnis zu sein , jedoch kann der erste Fall vom zweiten angegangen werden.

Also bin ich zu folgendem gekommen ...

Dieser Ansatz weist jedoch Einschränkungen auf: Wenn Sie beispielsweise das Akkordeon mit dem Anwendungsfenster spielen (schnell vergrößern und verkleinern), werden Lücken zwischen den Zoomstufen angezeigt, obwohl sich der Zoom nicht geändert hat (möglicherweise ist die äußere Breite und die innere Breite nicht) genau zur gleichen Zeit aktualisiert).

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 den Faktor wollen:

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

Jeum
quelle

Ich hatte Probleme mit "window.outerWidth / window.innerWidth", das mir auch den falschen Wert gab, und das könnte daran liegen, dass ich mich in einem Iframe befand. Also habe ich das übergeordnete Fenster verwendet und es gab die richtige Antwort: window.parent.window.outerWidth / window.parent.window.innerWidth

yan bellavance

0

Ich habe diese Lösung nur für Handys (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 die Zoomstufe direkt nach dem Einklemmen wünschen, müssen Sie wahrscheinlich wegen der Renderverzögerung eine kleine Zeitüberschreitung einstellen (aber ich bin mir nicht sicher, weil ich sie nicht getestet habe).

pmrotule
quelle

0

Diese Antwort basiert auf Kommentaren zu devicePixelRatio, die in der Antwort von user1080381 falsch wiedergegeben werden.

Ich habe festgestellt, dass dieser Befehl in einigen Fällen auch bei der Arbeit mit einem Desktop, Surface Pro 3 und Surface Pro 4 falsch zurückgegeben wurde.

Was ich fand, war, dass es auf meinem Desktop funktionierte, aber SP3 und SP4 gaben unterschiedliche Nummern voneinander und vom Desktop an.

Ich bemerkte jedoch, dass der SP3 das Eineinhalbfache der erwarteten Zoomstufe zurückbrachte. Als ich mir die Anzeigeeinstellungen ansah, war der SP3 tatsächlich auf 150% anstatt auf 100% eingestellt, die ich auf meinem Desktop hatte.

Die Lösung für die Kommentare sollte daher darin bestehen, die zurückgegebene Zoomstufe durch die Skalierung des Geräts zu teilen, auf dem Sie sich gerade befinden.

Ich konnte die Skalierung in den Windows-Einstellungen wie folgt abrufen:

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

Bei meinem SP3 sieht dieser Code also wie folgt aus: 100% Zoom:

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

Wenn Sie die ursprüngliche Antwort von user1080381 mit 100 multiplizieren, erhalten Sie einen Zoom von 100 (%).

Cameron Weaver
quelle

0

Habe es aktuell funktioniert muss sich aber noch nach Browser trennen. Erfolgreich auf Chrome (75) und Safari (11.1) getestet (noch keinen Weg für FF gefunden). Außerdem wird der Zoomwert auf der Retina-Anzeige korrekt angezeigt und Berechnungen werden beim Größenänderungsereignis ausgelöst.

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

Yogi
quelle

-1

hier ändert es sich nicht!:

<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 von der Zoomstufe: Es zeigt Ihnen die Breite von 400px (zumindest mit Firefox und IE8)

quelle

@tfl: Das liegt daran, dass Sie die Breite im Inline-Stil festgelegt haben. Ich habe Ihr Beispiel so geändert, dass es meinen Fall zeigt (in der Originalfrage).

Understack

-1

Dies kann niemandem helfen oder auch nicht, aber ich hatte eine Seite, die ich nicht richtig zentrieren konnte, egal welche CSS-Tricks ich ausprobiert habe, also schrieb ich eine JQuery-Datei mit dem Aufruf Center-Seite:

Das Problem trat bei der Zoomstufe des Browsers auf. Die Seite wurde verschoben, je nachdem, ob Sie 100%, 125%, 150% usw. waren.

Der folgende Code befindet sich in einer JQuery-Datei mit dem Namen centerpage.js.

Von meiner Seite musste ich auf JQuery und diese Datei verlinken, damit es funktioniert, obwohl meine Masterseite bereits einen Link zu JQuery hatte.

<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 ein Panel zentrieren möchten:

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

user1054326
quelle

-1

Diese Frage wurde wie vor langer Zeit gestellt, aber heute, als ich nach der gleichen Antwort "Wie man ein Vergrößern und Verkleinern erkennt" suchte, konnte ich keine Antwort finden, die für alle Browser geeignet wäre.

Wie jetzt: Bei Firefox / Chrome / IE8 und IE9 löst das Vergrößern und Verkleinern ein window.resize-Ereignis aus. Dies kann erfasst werden mit:

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

Bhumi Singhal
quelle

-1

Eine Problemumgehung für FireFox 16+, um DPPX (Zoomstufe) ausschließlich mit JavaScript zu finden:

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

Lexassen
quelle

Es funktioniert nicht wie erwartet in Firefox (52) auf einem MacBook mit Retina-Anzeige - gibt 2 zurück, wenn es nicht im Zoom ist. Ich habe eine Geige erstellt: jsfiddle.net/Terite/wadkh3ea

Terite

-1

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

ali
quelle

6

Bitte erklären Sie auch, wie Ihr Code funktioniert. Das ist hilfreich, wenn ein Neuling Ihre Antwort findet.

DisplayName

Ich habe eine Geige erstellt: jsfiddle.net/Terite/5n1bk9do As @AlexeySh. erwähnt, funktioniert es nicht wie erwartet auf Retina-Display in Chrome (56), Firefox (52). Es zeigt auch 0 im Zoom auf Safari (10).

Terite

-1

Das Problem liegt in den verwendeten Monitortypen, einem 4k-Monitor im Vergleich zum Standardmonitor. Chrome ist bei weitem am klügsten, wenn es darum geht, die Zoomstufe nur mithilfe von zu ermittelnwindow.devicePixelRatio Anscheinend kann es die Pixeldichte erkennen und meldet dieselbe Zahl zurück, um was auch immer zu tun.

Andere Browser, nicht so sehr. IE und Edge sind wahrscheinlich die schlechtesten, da sie die Zoomstufen sehr unterschiedlich handhaben. Um auf einem 4k-Monitor den gleichen Text zu erhalten, müssen Sie 200% anstelle von 100% auf einem Standardmonitor auswählen.

Ab Mai 2018 muss ich die Zoomstufen für einige der beliebtesten Browser, Chrome, Firefox und IE11, ermitteln. Ich habe es mir sagen lassen, wie hoch der Zoom-Prozentsatz ist. Für IE werden 100% gemeldet, selbst für 4k-Monitore, die tatsächlich bei 200% liegen, aber die Textgröße ist wirklich dieselbe.

Hier ist eine Geige: https://jsfiddle.net/ae1hdogr/

Wenn jemand andere Browser ausprobieren und die Geige aktualisieren möchte, tun Sie dies bitte. Mein Hauptziel war es, diese 3 Browser abzudecken, um festzustellen, ob Benutzer einen Zoomfaktor von mehr als 100% für die Verwendung meiner Webanwendung verwendeten, und einen Hinweis anzuzeigen, der einen Zoomfaktor für den Vermieter vorschlägt.

Bill_VA
quelle

Safari auf Mac Book Pro (Retina-Bildschirm) gibt 0 zurück, Chrome auf Nicht-Retina-Bildschirm gibt korrekt zurück, es scheint 100, 90 usw.

OZZIE

Gibt 200 auf Chrome & Firefox Retina-Bildschirm zurück

OZZIE

Wie erkennt man die Seitenzoomstufe in allen modernen Browsern?

Antworten: