Javascript zur Anzeige der aktuellen Viewport-Breite

von Oliver Richter (Kommentare: 0)

Für die Umsetzung von responsiven Designs habe ich mir einen kleinen Helfer aus Javascript (JQuery) und CSS gebaut, der mir die aktuelle Viewport-Breite stetig im Frontend anzeigt.
Es gibt natürlich eine Menge Browserplugins oder -Erweiterungen, die das viel besser tun, aber gerade in der Endphase der Entwicklung, in der die Seite oder Web-Anwendung auf allen möglichen Geräten und Browsern getestet werden muss und Erweiterungen nicht verwendbar sind, lohnt es sich, die Ausgabe der Viewport-Daten über die Webseite zu ermöglichen.

Bild: Oben rechts in der Box wird die aktuelle Viewport-Breite stets angezeigt

 

1. Javascript-Code einbinden (JQuery)

Für den folgenden Javascript-Code muss das JQuery-Framework importiert werden. Ist das noch nicht der Fall, können Sie das mit dem folgenden Code-Schnippsel tun (platzieren Sie den Script-Tag im Header-Bereich der HTML-Seite).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Es bietet sich an, den Anzeiger für die Viewport-Breite, der aus einem <DIV>-Containerelement besteht, ganz am Anfang des Markups zu platzieren. Um diesen Container via CSS gestalten zu können, weise ich ihm eine ID zu und erzeuge einen Text-Knoten, gleich zu Anfang schon, der die aktuell gemessene Viewport-Breite ausgibt. Dafür ist folgender Javascript-Code verantwortlich.

jQuery(document).ready(function () { 
	
	//////////////////////////////////////////////////////
	// Aktuelle Viewport-Breite anzeigen
	//////////////////////////////////////////////////////
	
	// neues Element als erstes im Body-Tag einfuegen, DIV-Element mit Attributen und Eventhandler erzeugen
	$( "body" ).prepend($('<div/>', { 'id': 'js-viewport-breitenanzeiger', 'text': 'Viewport: ' + $(window).width() + ' Pixel'}) );
	
	//////////////////////////////////////////////////////
	// Event-Handler (beim Aendern der Fenstergroesse 
	// Viewport-Daten in DIV-Element-Textknoten schreiben) 
	//////////////////////////////////////////////////////
	$( window ).resize(function() { 
		$('#js-viewport-breitenanzeiger').text("Viewport: " + $(window).width() + " Pixel");
	});

});

 

2. CSS-Anweisungen verwenden

Um den "Anzeiger" noch gut sichtbar zu platzieren, können Sie die folgenden CSS-Anweisungen verwenden:

#js-viewport-breitenanzeiger
   {
    position: fixed;
    top: 120px;
    right: 20px;
    z-index: 10000;
    background: rgba(230,72,0,0.80);
    border: 1px solid rgba(128,42,0,90);
    box-shadow: 0px 0px 20px rgba(0,0,0,0.10);
    padding: 10px;
    font-size: 11px;
    font-weight: bold;
    color: rgba(255,255,255,1);
    font-family: Arial, Verdana, sans-serif;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.50);
    text-transform: uppercase;
   }

 

Zusammenfassung 

Die neueste Version und den kompletten Code eines Beispiels können Sie auf GitHub einsehen unter https://github.com/Gruenfisch/ViewportBreitenAnzeiger.

Lizenz

Creative Commons Lizenzvertrag
Dieses Werk bzw. Inhalt steht unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 4.0 International Lizenz.

Zurück

Einen Kommentar schreiben

Bitte addieren Sie 8 und 4.

Bachten Sie: Für die Zuordnung Ihrer Nachricht werden die hier anzugebenden Daten Name, E-Mailadresse, Ihr Kommentar gespeichert. Sofern Sie den Wunsch der E-Mail-Benachrichtigung angegeben haben, wird aufgrund technischer Notwendigkeit auch dieser Wert gespeichert. Durch Absenden des Formulars erklären Sie sich damit einverstanden. Alternativ kontaktieren Sie mich bitte über meine E-Mailadresse oder Telefon.
Detaillierte und weitere Hinweise, insb. zum Widerrufsrecht finden Sie in der Datenschutzerklärung.

Sie befinden Sich in der Detailansicht eines Blog-Eintrags.

Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht.