[FRAGE] Onresize-Event triggert beim Zoomen

[harry_muc]

Hallo liebe Forumler,

aktuell erstelle ich innerhalb unserer Website eine Galerie, bei der die Bilder samt dem umschließenden Div-Container per Javascript an die Höhe und Breite des Viewports angepasst werden. Angesprochen wird die Funktion über das onload- bzw. onresize-Event:

http://www.moosmanufaktur.de/betaversion/galerie/pic01.htm?01

Leider reagiert das onresize-Event offensichtlich auch auf das Ein- bzw. Auszoomen (2-Finger-Geste) auf meinem mobilen Rechner (iPad Air2 / Safari). So wird das Bild unmittelbar nach dem Einzoomen entsprechend dem Javascript-Code wieder in den Viewport eingepasst.

Kennt vielleicht jemand eine Möglichkeit, das onresize-Event so einzusetzen, dass es eben nicht auf das Zoomen reagiert? Oder gibt es für mein Anliegen auch eine alternative Vorgehensweise?

Viele Grüße
Harry

 

[xorg1990]

Hallo Harry, willkommen in Forum.

Kennt vielleicht jemand eine Möglichkeit, das onresize-Event so einzusetzen, dass es eben nicht auf das Zoomen reagiert?

Der onresize Event macht genau das was er machen soll er, regiert auf die Veränderung der BrowserFenster Größe. Genau das machst du auch mit de 2 Finger geste auf Mobilen Geräten.

Du kannst das automatische anpassen an den viewport nur verhindern indem du überprüfst ob es sich um einen Mobilen Browser handelt oder nicht:

also:

onresize="mobileAndTabletcheck()"
und

      function mobileAndTabletcheck() {
            var regex = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i;
            var regex2 = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i;
            var browser = navigator.userAgent || navigator.vendor || window.opera;
            if (regex.test(browser) || regex2.test(browser.substr(0, 4))) {
                //wenn Mobiler Browser tu was
            }else{
               wrapperSkalieren();
             }
        }

Die Kilometerlange regex stammt von:
Detect Mobile Browsers - Open source mobile phone detection

Ich weiß allerdings nicht ob es dafür irgendwelche css Tricks gibt, deswegen würde ich mal warten bevor du an deinen Skript Veränderung vornimmst. Vielleicht weiß jemand noch was besseres.

PS: Geile Bilder.

MfG xorg1990
Oha ich sehe gerade das die regex zu lang ist, in der Vorschau war das noch ein Zeile , einfach mal durch den http://jsbeautifier.org/ schicken. Zeilenumbrüche machen die Sache auch nicht besser.

 

[kkapsner]

Es muss aber dann noch ein Check eingebaut werden, ob das onresize nicht über ein Kippen des Displays gefeuert wurde. Denn dann sollte/müsste man ja schon die Größe der Bilder ändern.
Vielleicht könnte man das darüber abdecken, dass man schaut, ob sich das Seitenverhältniss geändert hat.

 

[xorg1990]

Es muss aber dann noch ein Check eingebaut werden, ob das onresize nicht über ein Kippen des Displays gefeuert wurde.

Ei, daran habe ich nicht gedacht, dann wird die Sache natürlich etwas komplexer. Aber so schlimm ist das auch nicht, um zu erkennnen wie das Gerät steht müsste man nur via if abfragen ob die Breite größer ist als die Höhe und umgekehrt.

 

[kkapsner]

Nö - kompliziert ist das nicht. Man muss es nur machen und dabei die eventuell vorher schon vorhandene Zoomstufe mit beachten. Wenn man reingezoomt hat und dann dreht, muss ja immer noch gezoomt bleiben.

 

[harry_muc]

Hallo zusammen,

vielen Dank Euch beiden für die prima Tipps. Darauf aufbauend bin ich auf folgenden Lösungsansatz gekommen, über gleich vier Event-Handler:

var blnScale = true;                  // globale Variable: Skalieren ja/nein

window.addEventListener("touchstart", function() { blnScale = false; });
window.addEventListener("orientationchange", function() { blnScale = true;});
window.addEventListener("blur", function() { blnScale = true; });

window.addEventListener("resize", wrapperSkalieren);

function wrapperSkalieren() {
        if(blnScale) {                // wenn Skaliert werden soll, dann
                                      // hier steht der Code zum Skalieren
        }
}

Kurzum: Das OnResize-Event spricht generell nach wie vor die Funktion "wrapperSkalieren" an. Allerdings weise ich jetzt, über die jeweils vorauseilenden anderen drei Events, der globalen Variable "blnScale" den gewünschten Wert zu. Im Endeffekt skaliert so die Funktion immer, außer beim Zoomen (mit der 2-Finger-Geste) auf einem mobilen Gerät.

So funktioniert es bei uns jetzt erst einmal. Allerdings bin ich mir nicht so sicher, ob das Ganze wirklich sattelfest ist.

Viele Grüße
Harry

PS.: Geile regex

 

[kkapsner]

Ich glaube dein Skript funktioniert in folgendem Szenario noch nicht ganz richtig: zoome rein, dreh' das Handy und dreh' es wieder zurück. Dadurch verliert es die "Zoomstufe".

PS: Wann feuert denn das "blur"-Event?

 

[harry_muc]

Danke sehr, kkapsner, für Deinen Hinweis. Hab dann noch bemerkt: Die Zoomstufe ist auch verloren gegangen, falls ein zusätzlicher Tab angewählt wurde und Safari so eine neue Tab Bar eingeblendet hat (überwacht via "blur"-Event).

Hab mir jetzt noch einen anderen Lösungsansatz ausgedacht:

var blnDesktop = true;      // globale Variable: Desktop-PC (o.ä.) ja/nein
var intViewportInit = window.innerWidth || document.documentElement.clientWidth;

window.addEventListener("load", wrapperSkalieren);
window.addEventListener("resize", wrapperSkalieren);
window.addEventListener("touchstart", function() { blnDesktop = false; });

function wrapperSkalieren() {
   if (blnDesktop || viewportEqual()) {       // wenn Desktop-PC oder gleicher Viewport
                                              // hier steht der Code zum Skalieren
   }
}

function viewportEqual() {
   var intViewportAktuell = window.innerWidth || document.documentElement.clientWidth;
   if (intViewportAktuell == intViewportInit) { return true; }
   return false;
}

Jetzt wird der Wrapper nur skaliert, wenn entweder ein Desktop-PC (o.ä.) vorhanden ist oder die ursprünglich beim Seitenaufruf vorhandene Breite des Viewports der aktuellen Breite entspricht.

Im Endeffekt wird so beim Desktop-PC immer skaliert, egal ob sich der Darstellungsbereich des Browser-Fensters ändert. Beim mobilen Gerät (mit Touchscreen) wird nur skaliert, wenn sich die Breite des Viewports nicht verändert hat, sprich wenn nicht gezoomt worden ist.

Gibt es an der Stelle vielleicht noch eine elegantere Möglichkeit, etwa die aktuelle Zoomstufe eines mobilen Geräts auszulesen? Oder so eine Art "zoom"-Event? Bin an der Stelle leider nicht fündig geworden.

Gruß Harry

 

[kkapsner]

Warum darf ein Desktop-PC eigentlich nicht in das Bild reinzoomen? Aber das zu detektieren ist sehr schwierig bis unmöglich in manchen Browsern.

wenn sich die Breite des Viewports nicht verändert hat

Damit hast du aber wieder das Problem, dass beim rotieren die Zoomstufe verloren geht.

Gibt es an der Stelle vielleicht noch eine elegantere Möglichkeit, etwa die aktuelle Zoomstufe eines mobilen Geräts auszulesen?

Ich kenne keine.

 

[harry_muc]

Warum darf ein Desktop-PC eigentlich nicht in das Bild reinzoomen?

Soweit ich das für mich recherchieren konnte feuert das „onresize“-Event bei diesen zwei grundsätzlichen Szenarien:

1. Es verändert sich der Darstellungsbereich des Browserfensters in der Breite oder Höhe (Verkleinern, Maximieren, neue Symbolleiste u.ä.)

2. Es verändert sich die Zoomeinstellung.

Sobald nun das „onresize“-Event feuert, wird das aktuelle Bild in der Galerie von der Funktion „wrapperSkalieren“ neu skaliert, also in Breite und Höhe dem veränderten Viewport angepasst, und so ggf. die sichtbare Zoomstufe indirekt wieder auf den ursprünglichen Wert gestellt.

Beim Desktop-PC ist für uns der 1. Fall erwünscht, also das Skalieren nach Verändern des Darstellungsbereichs. Und den 2. Fall, das Skalieren nach Verändern der Zoomeinstellung, nehme ich nur notgedrungen in Kauf. Sozusagen mitgefangen, mitgehangen.

Damit hast du aber wieder das Problem, dass beim rotieren die Zoomstufe verloren geht.

Zumindest bei meinem iPad klappt das jetzt schon soweit. Oder bist Du am Ende noch mal auf ein Szenario gestoßen, bei dem die Zoomstufe verloren geht?

Gruß Harry

 

[kkapsner]

Zumindest bei meinem iPad klappt das jetzt schon soweit.

OK - in meinem Kopf hätte das nicht geklappt... aber mein Hirn ist eben kein Browser

 

[harry_muc]

Ende gut - alles gut ...und danke nochmal.