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

Vom Fragesteller als hilfreich ausgezeichnet

robinWa

15.07.2014, 13:32

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>

robinWa

15.07.2014, 13:37

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

Paul123456789

Fragesteller

15.07.2014, 19:29

@robinWa

Super, genau das war es, was ich gesucht habe, nochmals Vielen Dank!!

Das hat mir wirklich sehr geholfen!

robinWa

15.07.2014, 23:51

@Paul123456789

immer gern ;-)

robinWa

06.07.2014, 11:08

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" />

Paul123456789

Fragesteller

06.07.2014, 15:06

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!

robinWa

09.07.2014, 17:06

@Paul123456789

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 ;-)

Paul123456789

Fragesteller

13.07.2014, 14:56

@robinWa

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!!

Paul123456789

Fragesteller

13.07.2014, 15:01

@Paul123456789

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? :)

Paul123456789

Fragesteller

13.07.2014, 16:34

@Paul123456789

Bzw noch besser: Kann ich nur dieses eine iframe ausblenden, alle anderen aber angezeigt lassen, da diese überwiegen?

robinWa

15.07.2014, 13:30

@Paul123456789

... text wurde falsch angezeigt

Hallo liebe Community,

ich würde gerne bei meiner Website einen iFrame Code von SendinBlue in ein Pop-up integrieren, jedoch bis jetzt ohne Erfolg.

wenn ich den Code in den Head oder Body Bereich einfüge erscheint der Newsletter direkt zwischen den Post‘s.

Ich suche jedoch ein kostenloses Plugin oder Möglichkeit um den vorgegebenen iFrame Code oder HTML Code von SendinBlue als Pop-up nach einer gewissen Zeit über der Startseite erscheint.

Kann mir jemand helfen?

...zur Frage

Cookie Banner?

Hallo zusammen,

Was ist das beste kostenlose Cookie-Banner-Plugin für WordPress?

Da nutze ich nur Google analytics, FB.

...zur Frage

Wie kann ich meine WordPress-Website für mobile Endgeräte anpassen?

Hallo,

ich habe einen WordPress-Blog und habe nun eine "App" bei appyourself.de erstellt. Ich möchte nun, dass die Besucher diese App bzw. die mobile Ansicht meiner WordPress-Webseite sehen, wenn sie mit ihrem Handy auf meine Seite gehen. Weiß jemand, wie ich das machen kann? Plugin etc.?

Danke!

...zur Frage

JavaScript toggle color onclick?

Hallo.

Ich möchte in einem HTML Dokument mit JS die Farbe einer Schrift durch Klicken ändern. Default soll es beispielsweise schwarz sein, wenn man auf den Text klickt soll es grün werden. Bei einem zweiten Klick soll die Schrift wieder schwarz werden.

Ich habe viel ausprobiert, komme aber nicht zum Ziel.

Vielleicht könnt Ihr mir helfen? Vielen Dank im Vorraus!

...zur Frage

Wordpress Werbung Deaktivieren?

Ich habe Werbung auf meinem Gratis webspace bei Square7 mit wordpress. Ich habe dass für html schon gefunden http://www.vlmedia.de/885/workaround-fur-webmaster-wie-man-werbung-von-bplaced-und-square7-mit-einem-hack-ausblendet wie macht man dass mit WordPress? ich verwende das theme mh magazine lite

...zur Frage

Wie kann ich ein Element im CSS auf mobile Geräten ausblenden?

Hey Leute, ich verwende ein Wordpress Theme, welches grundsätzlich schon auf mobile Devices optimiert ist. Nun habe ich per Editor etwas in den Header hinzugefügt, was jedoch auf mobile Devices nicht gut ausschaut. Ich würde das ganze am liebsten nur auf Desktop PC's anzeigen lassen.

Es gibt bereits einen Style-mobile.css , wo viele Devices vordefiniert sind. Ich denke, darauf könnte ich zugreifen, weiss aber nicht genau wie. Zum Beispiel steht dort :

/* Mobile */
@media handheld, only screen and (max-width: 740px) {

body {
font-size: 14px;
-webkit-text-size-adjust: none;
}

.container{width: 94%;padding:0 3%;}

usw... Freue mich auf Hilfe.

Viele Grüße!

...zur Frage

Taskleiste deaktivieren?

Ich spiele gerne Roblox besonders Paintball und Base Battles. Mich stört beim spielen aber immer die Taskleiste, ich blende sie zwar aus aber wenn ich mit dem Mauszeiger an den Bildschirmrand komme ist die Taskleiste wieder da. Meistens schließe ich dann ausversehen das spiel oder öffne irgendetwas anderes. kann ich die Taskleiste also irgendwie deaktivieren? Ich habe den Vollbildmodus an und danke im voraus

:-D

...zur Frage

Wordpress-Seite Bilder unscharf im Internet Explorer?

Hallo Ihr!

Vielleicht kann mir jemand helfen. Ich habe eine Wordpress-Seite erstellt (https://ammann-ehrbar.ch), die in allen Browsern wunderbar funktioniert, ausser (oh Wunder) im Internet Explorer.
Die Bilder werden unscharf angezeigt. Ich verwende das Lay Theme und das dazugehörige Caroussel Plugin. Alle Plugins wurden aktualisiert, die Bilder neu hochgeladen (in kleinerer Grösse) und Cache geleert. Trotzdem besteht das Problem weiterhin (screenshot anbei). Gibt es eine Lösung für dieses Problem?

Liebe Grüsse

Eeva

...zur Frage

Ich verstehe diesen simplen Javascript-Code nicht, kann jemand helfen?

Hallo Leute, ich bin noch Anfänger in Webprogrammierung und habe eine kleine Verständnis Frage zu einem wahrscheinlich simplen Javascript /TS Code .

function foo (n: number): number[] {
    let bar : number[] = [n];
    do{
        if (n % 2 == 0) {
            n /= 2;
        } else {
            n *= 3;
            n++;
        }
        bar [bar.length] = n;
    } while (n != 1);
    return bar;
} let bar: number[] = foo(13);
for(let n of bar) {
    console.log(n);
   }

Die Mathematik sowie die Verschachtelung verwirren mich ziemlich. Die Konsole zeigt mir nacheinander folgende Werte an: 1,2,4,8,16, 5,10,20,40 zum Schluss die 13.
Ich kann es nicht nachvollziehen leider :(

Meine Gedanken dazu:

n % 2 == 0 der Array startet doch bei 0 oder? D.h 0%0 ==0 , passt also.

dann wird 0/= 2 ausgeführt, d.h das Ergebnis ist wieder 0.

bar [bar.length] = n; --> Die Zeile verstehe ich nicht.

while (n != 1); --> Ja n ist ungleich 1 weil n 0 ist. Dann wird durch return bar; wieder 0 zurückgegeben?

Ich glaube an diesem Punkt habe ich schon etliche Logik-Fehler gemacht. Ich hoffe jemand kann mir die Rechenschritte erklären.

...zur Frage

Breadcrumbs in Wordpress ausblenden?

Ich benutze WordPress.org und das VILVA Theme, dass offensichtlich automatisch Breadcrumbs darstellt (ohne Plugin). Wie kann ich diese ausblenden?

Finde immer nur Tipps zum Deaktivieren von Breadcrumbs, die mit einem Plugin hinzugefügt wurden. Das habe ich aber nicht. Gibt es da keinen simplen Schalter in den WordPress Einstellungen, den ich nicht finde?

...zur Frage

2 Sim Karten Handy eine aber nur für Mobile Daten?

Kann ich eine 2 karte einbauen über welche im Mobiles Internet empfange aber die andere für Wa z.b. verwende

...zur Frage

Meinem Kunden wurde gesagt, HTML für Webseiten sei veraltet. Was sagt Ihr dazu?

Hallo, meinem Kunden wurde von einem anderen Webdesigner gesagt, Html sei veraltet. Eine Webseite sollte aus PHP-Code bestehen, da sie sonst moderne Browser in Zukunft nicht mehr lesen könnten und weil Html nicht so gut sei für Suchmaschinen. Was sagt Ihr dazu? :-)

...zur Frage

Tags / Schlagwort "Links" bei Wordpress entfernen/abschalten?

Kann ich Links von Schlagworten / Tags irgendwie per CSS oder ähnlichem deaktieren? Ich nutze ein Plugin wo die Schlagworte als Vorschau genutzt werden, aber die haben leere Links drauf URL/#.

Sieht nich nur doof aus, ist auch irreführend! Kann ich Tag Links per CSS deaktivieren? Oder geht das nur im Theme? Wenn ja wie genau? Gibts ggf. nen Plugin womit ich das alternativ regeln kann?

Danke im Vorraus

...zur Frage

Schriftfarbe ändern bei Wordpress?

HI, ich würde ganz gerne die Schriftfarbe ändern, jedoch finde ich kein Plugin welches mir weiterhilft. Als Programm verwende ich Wordpress.org Gibt es überhaupt ein Plugin oder muss ich die Farbe mit HTML codes ändern?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen