Bedingtes Laden von Anzeigencode basierend auf der Bildschirmgröße des Geräts mithilfe von JavaScript

Question

Wie können Anzeigen (über einen Ad Server) auf unterschiedliche Bildschirmgrößen für mobile Geräte konditional geschaltet werden?

Ich möchte die Anzeige nicht auf nichts einstellen, um den Inhalt auszublenden, da dadurch die Anzahl der Anzeigenimpressionen verzerrt wird.

Ich möchte den Anzeigencode (zB.) In div mit clientseitigem JavaScript ohne jQuery einfügen.

Zum Beispiel

<div id="adzone"></div> 

If width < 768px 
    inject ad code for mobile 
else 
    inject ad code for tablet 

Wie implementiere ich diese Idee?

Und wie wird die Situation gehandhabt, wenn die Gerätedrehung stattfindet, wenn sich die Gerätebreite von weniger als 768px auf mehr als 768px ändert?

Answer 1

Also, zwei Dinge zu decken:

Eine Möglichkeit, dass Sie diese einfach auf die Bildschirmgröße und dann haben, berichten die JS erfassen wäre tun könnten, dass auf dem Server, wenn für eine Anzeige zu fragen. Der Server kann dann entscheiden, welche Anzeige geschaltet werden soll.

Sie sprechen über Bildschirm Rotation und Sie haben media-queries in Ihrer Frage markiert. @media sind CSS (nicht JS) -Features, mit denen Sie Ihr Look/Feel basierend auf der Bildschirmgröße anpassen können. Es liegt an Ihnen, sicherzustellen, dass die von Ihnen gelieferten Anzeigen sowohl vertikal als auch horizontal angezeigt werden. Sie müssen nicht jedes Mal neue Anzeigen laden, wenn das Gerät die Ausrichtung ändert.

Die Erkennung der Bildschirmgröße kann sehr genau auf dem Gerät und wie es gemeldet wird. Für JavaScript-Welt deckt this SO post jedoch alles ab, was Sie wissen müssen.