Ein Div für Mobile ausblenden

    Hi,


    wie würdet ihr das angehen?


    Ich möchte für Mobile kleiner als 480 Pixel ein Div ausblenden.

    Ich bin nun nicht der hellste Stern, was Javascript angeht und bitte euch um Hilfe :)


    Code
    <div id="123"><script src="//122.com"></script><script src="//1234.com" ></script></div>

    Kleiner ab einer Auflösung von 480 soll der gesamte Div nicht mehr erscheinen und das Javascript auch nicht mehr geladen werden. Wie würdet ihr das angehen?


    Vielen lieben Dank für jede Unterstützung!

    Und warum muss das Laden der Scripts in einem DIV und inline sein?


    Generell: Du kannst auch per JavaScript SCRIPT-Tags einfügen. Natürlich auch einen solchen DIV-Container inklusive der SCRIPT-Tags aufbauen.


    Hier eine Grundidee, die mit HEAD-Tag und appendChild arbeitet: https://stackoverflow.com/ques…-depending-on-screen-size


    Wenn du statt mit isMobile mit der Screen-Breite arbeitest https://www.w3schools.com/jsref/prop_screen_width.asp fragst beim Laden der Seite ab, ob größer deiner Wunschbreite. Wenn ja wird DIV aufgebaut. Also der umgekehrte Weg.


    Andere Variante wäre, innerhalb der besagten JS-Skripte eine width-Weiche einzubauen (= wird abgebrochen, wenn Width nicht passt) und die obigen CSS-Tipps zusätzlich. Nicht ganz schön, weil sie trotzdem geladen werden, aber eben nichts tun.

    Eine definitivere Antwort hast dir durch Fehlen eines Links zum Problem verbaut ;) Es hängt nämlich auch oft von der Ladereihenfolge und Abhängigkeiten der anderen Skripte untereinander ab, wie man dabei vorgehen sollte. Gelingt mir meist auch nicht aus der Hüfte.

    Du möchtest nicht, dass ein DIV auf einem mobilen Endgerät geladen wird, willst aber ein Script stattdessen laden, dass das verhindert. CSS ist performancesparender. Den (Un-)Sinn eines Scripts verstehe ich an dieser Stelle nicht?



    Axel

    CSS verhindert nicht das Laden der JavaScripts in Post #1. Das möchte TE ebenfalls verhindern. Da TE eine exakte Breite von 480px nennt und ich keine Lust habe zu testen, ob das eine Breite ist, auf die auch der Advanced Module Manager anspricht und er die Seite nicht zeigt, ob der überhaupt was bringen kann für sein Vorhaben. Usw.


    Bleiben also nur 5-15 Zeilen zusätzliches JS um darüber zu entscheiden, ob DIV inklusive SCRIPT-Tags eingesetzt werden oder nicht. Oder eine aufgeblasene PHP-Bibliothek, die das serverseitig entscheidet.

    Das zu ladende Script ist intensiv und nicht für mobile geeignet - also möchte ich nicht, dass es geladen wird. Das geht über PHP auf dem Server (http://mobiledetect.net/), oder eben beim Client. Mit geht es nicht darum 100 Prozent abzudecken, sondern den größten Teils der mobilen Endgeräte.


    Durch eure Hinweise bin ich auf eine Methode gestoßen, welche mit weiter Hilft:

    Code
    <div id="NameXYZ"> 
  <script>
    //Determine if the device have the dissired size, information about MatchMedia here: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
    if (window.matchMedia("(min-width: 480px)").matches) {
      //if the size matches, write the scripts to the document 
      document.write('<script src="//123.com"><\/script> ');
      document.write('<script src="//1234.com"><\/script> ');
    }  
  </script>
</div>

    Vielen lieben Dank für eure Hinweise!