Erkennen Seite zoom ändern mit jQuery in Safari

Ich habe ein problem mit Safari auf eine web-Anwendung mit einem " position:fixed element. Wenn die Seite vergrößert ist (kleiner 100%) Dinge gehen kaputt und müssten behoben werden, indem eine Funktion aufrufen. So möchte ich erkennen, die der Nutzer Zoomen. Ich fand diese jQueryPlug-in vor einer Weile:

http://mlntn.com/2008/12/11/javascript-jquery-zoom-event-plugin/

http://mlntn.com/demos/jquery-zoom/

Erkennt er Tastatur und Maus-Ereignisse können dazu führen, dass eine Seite die Zoomstufe ändern. Fair genug. Es funktioniert auf aktuellen FF und IE, aber nicht auf Safari. Irgendwelche Ideen, was könnte getan werden, um zu tun, etwas anderes in aktuellen WebKit-Browser?

InformationsquelleAutor C.O. | 2011-05-28

  1. 22

    Es ist nicht eine direkte Kopie der diese Frage da, die sich mit Mobile Safari, aber der gleichen Lösung arbeiten.

    Wenn Sie zoom-in Fenster.innerWidth angepasst ist, aber Dokument.documentElement.clientWidth ist nicht, daher:

    var zoom = document.documentElement.clientWidth / window.innerWidth;

    Darüber hinaus sollten Sie in der Lage sein zu verwenden, die onresize event-handler (oder jQuery .resize()) zu prüfen:

    var zoom = document.documentElement.clientWidth / window.innerWidth;
$(window).resize(function() {
    var zoomNew = document.documentElement.clientWidth / window.innerWidth;
    if (zoom != zoomNew) {
        //zoom has changed
        //adjust your fixed element
        zoom = zoomNew
    }
});
    ist, dass die Werke mit einem anderen web-browser wie chrome und ff?
    Ich habe gerade getestet, diese Theorie auf Chrome und ich scheinen immer ein Verhältnis ziemlich nah an 1, ob ich mich vergrößert auf 100%, 67% oder 175%. on a side note, jQuery $(window).width() gibt denselben Wert zurück wie document.documentElement.clientWidth, in der Erwägung, dass window.innerWidth ist in der Regel etwas größer (obwohl nicht genug, um zu reflektieren, ist der zoom-Wert).
    Fenster.innerWidth ist nicht genau die Breite, wenn angezeigt, die scrollbar. Sie haben zu tun Fenster.innerWidth - 17 zu 1, wenn es kein zoom
    Das wird nicht funktionieren, wenn der Benutzer die zoom-out-1 mit den Fingern
    In diesem Fall, prüfen Sie nicht, wenn Sie genau gleich (===) aber überprüfen, ob Ihre Differenz ist kleiner als 1 (Math.abs(element.scrollTop + element.Höhe - Kind.innerHeight) < 1)) Das sollte für die meisten Fälle

    InformationsquelleAutor newtron

  2. 1

    Gibt es ein hübsches plugin gebaut von yonran , kann die Erkennung. Hier ist sein bisher beantwortet Frage auf StackOverflow. Es funktioniert für die meisten Browser. Die Anwendung ist so einfach wie diese:

    window.onresize = function onresize() {
  var r = DetectZoom.ratios();
  zoomLevel.innerHTML =
    "Zoom level: " + r.zoom +
    (r.zoom !== r.devicePxPerCssPx
        ? "; device to CSS pixel ratio: " + r.devicePxPerCssPx
        : "");
}

    Demo

    InformationsquelleAutor Starx

  3. 1

    srceen.Breite ist fester Wert, sondern wo, wie Fenster.innerWidth Wert, der geändert wird, als pro den zoom-Effekt. versuchen Sie bitte den folgenden code:

     $(window).resize(function() {
   if(screen.width == window.innerWidth){
       alert("you are on normal page with 100% zoom");
   } else if(screen.width > window.innerWidth){
       alert("you have zoomed in the page i.e more than 100%");
   } else {
       alert("you have zoomed out i.e less than 100%");
   }
});
    vielen Dank für den code. es ist hilfsbereit zu mir.
    Lösung funktioniert nicht auf einem mac

    InformationsquelleAutor Dinnu Buddy

Schreibe einen Kommentar