Zur Navigation

wenn-Funktion bezüglich Fensterbreite

1 Isabell (Gast)

Guten Tag,
ich habe hier ein Skript, bei dem es am Anfang eine Abfrage gibt, ob eine Smartphone das Skript bzw. die Webseite aufgerufen hat und wenn dies der Fall ist, dann werden bestimmte Bilder geladen, die kleiner sind als die Bilder, die ansonsten geladen werden.
Nun habe ich mich gefragt, ob dieses Skript wirklich alle Smartphones erkennt - als auch die zukünftigen Versionen - und irgendwie bezweifle ich das.
Da wäre es meiner Meinung nach viel praktischer, wenn die Fensterbreite (also die Breite vom vorhandenen Display) abgefragt wird und wenn diese kleiner als 450 Pixel ist, dann sollen die kleinen Bilder geladen werden.
Nur weiß ich leider nicht, wie man das umsetzt und ich wäre wirklich sehr dankbar, wenn mir dies jemand verraten könnte.
Hier ist der Beginn von Skript:
[Jörg: entfernt]
und hier der Link zum kompletten Skript:
[Jörg: entfernt, da Seite nicht mehr vorhanden]

Vielen herzlichen Dank schon mal für eure Hilfe

17.10.2016 15:55 | geändert von Jörg: 20.10.2016 13:08

2 Jörg Kruse

Würde ich so probieren:

$(document).ready(function() {
    "use strict";
    if ($(window).width() < 450) {
        /* ... */
    } else {
        /* ... */
    }
});

17.10.2016 16:29 | geändert: 17.10.2016 16:32

1 Forenmitglied fand diesen Beitrag gut

3 Isabell (Gast)

Hallo Jörg, vielen vielen Dank für die Lösung! Funktioniert einwandfrei. Das freut mich sehr.

Jetzt hätte ich noch eine Frage.
Nun ist es so, dass bei einer Fensterbreite von weniger als 450 Pixel die kleinen Bilder geladen werden und ansonsten werden andere Bilder geladen.
Gibt es hier noch die Möglichkeit, dass man noch eine Ergänzung anbringt und zwar so, dass bei einer Fensterbreite von mehr als 1920 Pixel extra große Bilder geladen werden?

18.10.2016 11:56

4 Jörg Kruse

Das Konstrukt lässt sich noch mit einem entsprechenden else if Abschnitt erweitern:

$(document).ready(function() {
    "use strict";
    if ($(window).width() < 450) {
        // kleine Bilder
    } else if ($(window).width() > 1920) {
        // große Bilder
    } else {
        // normale Bilder
    }
});

18.10.2016 13:49

1 Forenmitglied fand diesen Beitrag gut

5 Isabell (Gast)

Hallo Jörg,
vielen Dank für deine Hilfe!
Freut mich sehr, dass du mir so sehr hilfst.

Habe ein bisschen darüber nachgedacht und habe mich gefragt, ob man da noch weitere Bedingungen in diesem Konstrukt hinterlegen kann.
1. Bedingung: Breite kleiner 450, da kleine Bilder für Smartphone im Hochformat
2. Breite zwischen 450 und 749 Und die Fensterbreite ist größer als die Höhe des Fensters, dann kleine Bilder (aber natürlich andere als oben) für Smartphone im Querformat
3. Breite des Fensters >1920 oder Höhe des Fensters > 1111, deine große Bilder

Klappt das Ganze damit folgendermaßen?
$(document).ready(function() {
    "use strict";
    if ($(window).width() < 450) {
        // kleine Bilder Für Smartphone Hochformat
    } else if ($(window).width() > 449) & ($(window).width() < 750) & $(window).width() > $(window).height() {
        // kleine Bilder für Smartphone Querformat
    } else if ($(window).width() > 1920) | ($(window).height() > 1111) {
        // große Bilder
    } else {
        // normale Bilder
    }
});

19.10.2016 10:03

6 Jörg Kruse

Grundsätzlich ja. Der Und- und Oder-Operator bestehen allerdings aus jeweils zwei Zeichen, "&&" bzw. "||". Und die Klammern sind noch nicht richtig gesetzt.

Zum besseren Verständnis habe ich die Bedingungen im if Konstrukt mal eingerückt:

} else if (
  ($(window).width() > 449) &&
  ($(window).width() < 750) &&
  ($(window).width() > $(window).height())
) {

} else if (
  ($(window).width() > 1920) ||
  ($(window).height() > 1111)
) {

Hilfreich kann hier auch ein Syntax-Highlighter im Editor sein, der bei einer falschen Klammerung den folgenden Code falsch einfärbt

19.10.2016 11:27

1 Forenmitglied fand diesen Beitrag gut

7 Isabell (Gast)

Vielen vielen Dank für die Fehlerbehebung und den Tipp!
Wünsche dir noch einen schönen Tag!

19.10.2016 15:18

8 Isabell (Gast)

Hallo Jörg, könntest du bitte den Code in meinem ersten Beitrag löschen, den dieser stammt nicht von mir und ich weiß nicht, ob ich diesen veröffentlichen darf. Vielen Dank für das Verständnis.

20.10.2016 12:04

9 Jörg Kruse

Ich habe den Code aus dem ersten Beitrag entfernt

20.10.2016 13:08

10 Isabell (Gast)

Vielen Dank!
Und nochmals danke für deine Hilfe und deine Tipps!
Wünsche dir noch eine schöne Woche

20.10.2016 13:37