it-swarm.com.de

Browserübergreifendes Zoomen verhindern

Für ein kartenähnliches Tool möchte ich die Browser-Zoomfunktion deaktivieren . (Ich weiß, dass dies im Allgemeinen eine schlechte Idee ist, aber für eine bestimmte Website ist sie erforderlich.)

Ich habe es erfolgreich gemacht, indem ich die Tastenkombination gehört habe CTRL+ / CTRL- und Hinzufügen von e.preventDefault() usw. Dies hindert jedoch nicht daran, den Zoom im Zoom-Menü des Browsers zu ändern.

Ich habe es versucht:

  • mit CSS: zoom: reset; Es funktioniert für Chrome (siehe diese Seite für ein funktionierendes Beispiel ), aber es funktioniert überhaupt nicht unter Firefox.

  • in diversen fragen/antworten habe ich auch gefunden

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    dies scheint jedoch nur für mobile Geräte zu funktionieren.


Wie vermeide ich das Zoomen im Browser?

56
Basj

Ich habe nicht wirklich eine "maßgebliche" Antwort gefunden, was eine klare Aussage der Browser-Entwickler bedeutet. Alle Antworten auf ähnliche Fragen, die ich gefunden habe (wie diese oder diese ), deuten auf dasselbe hin - die Zoomfunktion des Browsers ist zum Nutzen der Benutzer und Einige Browser (wie Firefox) erlauben es Ihnen als Website-Ersteller einfach nicht, diese Option zu deaktivieren.


Diese Dokumentation gibt möglicherweise Aufschluss darüber, warum das Deaktivieren des Zooms für Autoren auf Mobilgeräten eine gute Idee ist, auf Desktops jedoch nicht.

Kurz gesagt, Sie müssen möglicherweise verhindern, dass Mobilgeräte Ihre Website anfänglich automatisch zoomen, wenn Sie wissen, dass das berechnete automatische Zoomen unangemessen ist. Auf Desktops gibt es keine automatische Zoomfunktion. Wenn Benutzer also auf Ihre Website zugreifen, sehen sie diese genau so, wie sie angezeigt werden sollte. Wenn sie Entscheiden Sie dann, dass sie die Seite vergrößern müssen. Es gibt keinen guten Grund, dies zu verhindern.


Zu den Lösungen, die Sie aufgelistet haben:

  • zoom ist eine nicht standardmäßige Eigenschaft wird von Firefox nicht unterstützt und
  • <meta name="viewport"> befasst sich nur mit Geräten, bei denen das Layout-Ansichtsfenster und das visuelle Ansichtsfenster nicht dasselbe sind , dh mobile Geräte.
30
hon2a

Sie können den Zoom im Browser durch Drücken von Strg + oder Strg- oder Verwenden der Strg-Taste + Mausrad nach oben oder unten durch diesen Code deaktivieren. 

$(document).keydown(function(event) {
if (event.ctrlKey==true && (event.which == '61' || event.which == '107' || event.which == '173' || event.which == '109'  || event.which == '187'  || event.which == '189'  ) ) {
        event.preventDefault();
     }
    // 107 Num Key  +
    // 109 Num Key  -
    // 173 Min Key  hyphen/underscor Hey
    // 61 Plus key  +/= key
});

$(window).bind('mousewheel DOMMouseScroll', function (event) {
       if (event.ctrlKey == true) {
       event.preventDefault();
       }
});

Eine Demo finden Sie hier http://jsfiddle.net/VijayDhanvai/4m3z3knd/

29
Vijay Dhanvai

Ich denke, Sie können das Browser-Zoom-Ereignis (Strg + "+") hören und dann nach window.devicePixelRatio suchen.

Wenden Sie dann entsprechend die HTML5-Skalierungstransformation auf das body-Element an, um das Verhältnis zu verringern. Grundsätzlich können Sie die Funktionalität nicht verhindern, Sie können jedoch negative Effekte mit derselben Stärke anwenden.

POC-Code:

 <body style="position: absolute;margin: 0px;">
        <div style="width: 300px; height: 200px; border: 1px solid black;">
            Something is written here
        </div>
        <script>
            var keyIncrease = [17, 61];
            var keyDecrease = [17, 173];
            var keyDefault = [17, 48];
            var listenMultiKeypress = function(keys, callback){
                var keyOn = [];
                for(var i=0; i<keys.length; i++){
                    keyOn[i] = false;
                }
                addEventListener('keydown', function(e){
                    var keyCode = e.which;
                    console.log(keyCode);
                    var idx = keys.indexOf(keyCode);
                    if(idx!=-1){
                        keyOn[idx] = true;
                    }
                    console.log(keyOn);
                    for(var i=0; i<keyOn.length; i++){
                        if(!keyOn[i]){
                            return;
                        }
                    }
                    setTimeout(callback, 100);
                });
                addEventListener('keyup', function(e){
                    var keyCode = e.which;
                    var idx = keys.indexOf(keyCode);
                    if(idx!=-1){
                        keyOn[idx] = false;
                    }
                    console.log(keyOn);
                });
            };
            var previousScale = 1;
            var previousDevicePixelRatio;
            var neutralizeZoom = function(){
                //alert('caught');
                var scale = 1/window.devicePixelRatio;

                document.body.style.transform = 'scale('+(1/previousScale)+')';
                document.body.style.transform = 'scale('+scale+')';
                var widthDiff = parseInt(getComputedStyle(window.document.body).width)*(scale-1);
                var heightDiff = parseInt(getComputedStyle(window.document.body).height)*(scale-1);
                document.body.style.left = widthDiff/2 + 'px';
                document.body.style.top = heightDiff/2 + 'px';
                previousScale = scale;
            };

            listenMultiKeypress(keyIncrease, neutralizeZoom);
            listenMultiKeypress(keyDecrease, neutralizeZoom);
            listenMultiKeypress(keyDefault, neutralizeZoom);
            neutralizeZoom();
        </script>
    </body>
</html>
8
thunder

Wie gesagt, das ist wirklich nicht möglich. Es gibt jedoch einige Möglichkeiten, wie Sie trotzdem klug vorgehen können.

Bei drei der fünf großen Browser können Sie die Zoomstufe des Browsers anzeigen. Außerdem sollte der Browser gezoomt werden, wenn ein window.onresize event ausgelöst wird. 

IE:      event.view.devicePixelRatio           OR window.view.devicePixelRatio
Chrome:  event.currentTarget.devicePixelRatio  OR window.devicePixelRatio
Firefox: event.originalTarget.devicePixelRatio OR window.devicePixelRatio
Safari:  /* Not possible */
Opera:   /* Not possible */

Ich denke, das Zeug nach OR arbeitet auf etwas, das mir aufgefallen ist, als ich herumgespielt habe. Die ersten, die ich kenne, funktionieren zumindest in der jeweils neuesten Version. Beachten Sie, dass sowohl Safari als auch Opera die Variable devicePixelRatio haben. Beide ändern sich jedoch nie. Es ist immer nur 1.

Das Obige ist Ihr einfacher Weg, wenn Ihnen das nicht wichtig ist. Dann könnten Sie das Skript detect-zoom ausprobieren, das mir bei der Suche nach Lösungen für Safari und Opera begegnet ist.

Jetzt können Sie die Zoomstufe abrufen und dann den Zoom so ausrichten, dass er nichts tut. Wenn ich also meinen Browser auf 50% zoome, gehen Sie einfach auf 200%. Also keine Änderung. Natürlich wird es etwas komplizierter, Sie müssen den letzten Browser-Zoom und den neuen Browser-Zoom speichern und etwas kompliziertere Berechnungen durchführen, aber basierend auf dem, was Sie bereits haben, sollte dies ein Kinderspiel sein. 

Eine andere Idee wäre, einfach auf ein Größenänderungsereignis zu warten und die neue sichtbare Größe basierend zu berechnen. Dies kann jedoch zu Problemen führen, wenn das Fenster nur in der Größe geändert wird. Ich denke, das obige wird Ihre beste Option sein, mit einem Fallback alert, um den Benutzer zu warnen, bei Bedarf nicht zu zoomen.

5
David

Ich habe den Code von Vijay aktualisiert:

$(document).ready(function(){
 var keyCodes = [61, 107, 173, 109, 187, 189];

 $(document).keydown(function(event) {   
   if (event.ctrlKey==true && (keyCodes.indexOf(event.which) != -1)) {
     alert('disabling zooming'); 
     event.preventDefault();
    }
 });

 $(window).bind('mousewheel DOMMouseScroll', function (event) {
    if (event.ctrlKey == true) {
      alert('disabling zooming'); 
      event.preventDefault();
    }
  });
});

Diese Lösung ist plattformübergreifend (OS/Win) für Desktop-Browser.

3

Es ist einfach:

function load(){
  document.body.addEventListener("wheel", zoomShortcut); //add the event
}

function zoomShortcut(e){
  if(e.ctrlKey){            //[ctrl] pressed?
    event.preventDefault();  //prevent zoom
    if(e.deltaY<0){        //scrolling up?
                            //do something..
      return false;
    }
    if(e.deltaY>0){        //scrolling down?
                            //do something..
      return false;
    }
  }
}
p {
  display: block;
  background-color: #eeeeee;
  height: 100px;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Mousewheel control!</title>
  </head>
  <body onload="load()">
    <p>If your Mouse is in this Box, you can't zoom.</p>
  </body>
</html>

2
B. Colin Tim

Fügen Sie Folgendes in Ihren HTML-Code ein:

Für Handys: Fügen Sie zwischen dem Tag <Head> ... </ Head> ein.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">

Für Cross-Browser: Fügen Sie direkt nach dem Start den Tag <body> ... ein.

<script>
  document.body.addEventListener("wheel", e=>{
    if(e.ctrlKey)
      event.preventDefault();//prevent zoom
  });
</script>
1
Jeremy Levett
$(document).ready(function () {
      $(document).keydown(function (event) {
          if (event.ctrlKey == true && (event.which == '107' || event.which == '109' || event.which == '187' || event.which == '189'))
           {
               event.preventDefault();
           }
       });

           $(window).bind('mousewheel DOMMouseScroll', function (event) {
               if (event.ctrlKey == true) {
                   event.preventDefault();
               }

      });
  })
1
Shanu Shaji

Hast du es versucht ...

    $("body").css({
        "-moz-transform":"scale(1)",
        "-webkit-transform":"scale(1)",
        "-o-transform":"scale(1)",
        "-ms-transform":"scale(1)"
    });

Ich habe diese Art von Code verwendet, um die Skala festzulegen oder neu einzustellen.

0
rfornal