iframe für mobile Geräte deaktivieren?
Hallo zusammen,
auf meiner Website blende ich am rechten Bildschirmrand ein Werbebanner ein. Dazu verwende ich ein iframe (Wordpress+Plugin). Rufe ich meine Seite über ein mobiles Gerät auf, stört mich dieser Banner allerdings. Ist es möglich den Tag so zu verändern, dass der Banner nur noch an einem Computer (desktop) nicht aber auf einem Handy (Mobile) angezeigt wird?</p> <p>Vielen Dank für die Hilfe!</p>
2 Antworten
mit css kann man auf einfache html-Elemente zugreifen (wie in meinem Beispiel das Tag). Man kann aber auch auf einzelne Elemente zugreifen.</p> <p>Dazu gibt es zwei möglichkeiten:</p> <ol class="arabic"> <li>Durch Klassen kann man Beliebige html-Elemente gruppieren und dann mit CSS auf die ganze Gruppe zugreifen. (Das macht bei mehreren Elementen sinn)</li> <li>Was in deinem Fall vermutlich sinnvoller ist, sind ID's. Du kannst dem iframe, den du in CSS ansprechen willst, mit einer ID versehen und dann in CSS mit dieser ID arbeiten.</li> </ol> <p>Das funktioniert folgendermaßen:</p> <p>Im html-Code gibst du dem iframe, das du ausblenden möchtest eine id:</p> <pre><code><iframe id="frame1"></iframe></code></pre> <p>in CSS kannst du diese ID dann mit einem Hashtag ansprechen:</p> <pre><code>@media screen and (max-width: 600px) { #frame1{display:none !important} }</code></pre> <p>Wenn du mehrere Elemente auf Mobilgeräten ausblenden möchtest, solltest du Klassen verwenden:</p> <p>Die Vorgehensweise ist ähnlich. Im html-Code gibst du allen Elementen, die du ausblenden möchtest einen Klassennamen:</p> <pre><code><iframe class="mobile-hidden"></iframe> <iframe class="mobile-hidden"></iframe> <iframe class="mobile-hidden"></iframe></code></pre> <p>In CSS wird diesmal ein punkt vor den Klassennamen gesetzt:</p> <pre><code>@media screen and (max-width: 600px) { .mobile-hidden{display:none !important} }</code></pre>
Super, genau das war es, was ich gesucht habe, nochmals Vielen Dank!!
Das hat mir wirklich sehr geholfen!
Mit CSS-Media Queries kannst du Styles für mobile Geräte festlegen. Das könnte dann so aussehen:
@media screen and (max-width: 600px) {
iframe{display:none}
}
So könntest du entscheiden ab welcher Bildschirmbreite der iframe verschwinden soll.
Da manche Mobilen Geräte, Internetseiten immer in ihrer vollen breite anzeigen, solltest du in den html-Head noch das hier einfügen:
<meta name="viewport" content="width=device-width" />
Hallo und Vielen Dank für deine Antwort! leider konnte ich mich auf dem Gebiet noch nicht sehr schlau machen und stelle deswegen auf das Risiko hin dass sie total doof ist diese Frage:
Wo muss ich denn den von dir genannten Code einfügen?
Vielen Dank für deine Hilfe!
Ich meinerseits hab mich auch blöd angestellt und vollkommen überlesen, dass du wordpress benutzt ;-).
Ich kenn mich mit wordpress leider nicht sonderlich gut aus... aber ich bin mir sicher, dass es irgenteine möglichkeit gibt, den quellcode der -von wordpress- generierten seite zu verändern.
Leider weis ich nicht, wie die datein in wordpress genau heißen aber wenn ich raten müsste, dann gibt es vieleicht ein
template.css
in diesem fall kannst du das erste codebeispiel einfach direkt einfügen (es währe vieleicht ganz gut, wenn du den code erweiterst)
@media screen and (max-width: 600px) {
iframe{display:none !important}
}
wenn es sowas wie:
index.html
gibt, kannst du da das zweite codebeispiel einfügen. wichtig dabei ist, dass es im dokumentenkopf steht: also zwischen
<head>
und
</head>
Leider kann ich dir nicht sehr viel weiter helfen, aber wenn du dich ein bisschen schlaumachst
googlen nach: wordpress templates verändern... oder so ähnlich
glaub ich, kommst du vieleich selbst zurecht. Bei speziefischeren Fragen helf ich gerne weiter ;-)
Klasse, Vielen Dank für die ausführlichen Erklärungen, alles funktioniert jetzt genau so wie gewünscht!
Für alle die das später lesen und auch Wordpress nutzen: Ich habe den erstgenannten Code ("@media screen...) unter Design-->CSS bearbeiten eingefügt - das wars.
Dankeschön!!
Eine Frage habe ich aber dennoch noch: Ich habe ein iFrame auf meiner Seite, das ich gerne auch bei kleineren Bildschirmen eingeblendet lassen möchte. Wie kann ich eine solche Ausnahme einfach hinzufügen? :)
Bzw noch besser: Kann ich nur dieses eine iframe ausblenden, alle anderen aber angezeigt lassen, da diese überwiegen?
falls der Text bei dir auch falsch angezeigt wird, kannst du ihn kopieren und ihn in ein htmldokument einfügen... macht das ganze vermutlich lesbarer