Ein Div für Mobile ausblenden

tekknotrip

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!

Dudlhofer

Im CSS des Templates:

Code

@media screen and (max-width:480px){
    #123 { display:none; }
}

tekknotrip

Hallo Dudlhofer,

Das Problem mit dem @media Query ist, dass der Inhalt lediglich ausgeblendet, aber dennoch geladen wird.

Das möchte ich gerne vermeiden.

firstlady

Hast du Bootstrap? In bootstrap geht das einfach indem man eine passende klasse angibt. Wie es geht ist abhängig von der Bootstrap Version.

Zum Beispiel gab es mal <div class="hidden-phone" oder class="d-none d-md-. ..>

tekknotrip

Danke, habe es ausprobiert, ist aber nichts anderes als @media

Re:Later

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/questions/3490…-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.

time4mambo

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

Re:Later

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.

tekknotrip

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!

skodi

Hallo, kennst du diese Erweiterung von Viktor?

Vielleicht hilft das weiter:

https://joomla-extensions.kubik-rubik.de/de/dsc-device-specific-content

tekknotrip

Danke Skodi,

wenn ich es öfters verwenden muss, sicherlich eine Alternative!