Display-Breite von Geräten anzeigen

CSS und andere hilfreiche Anweisungen
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Display-Breite von Geräten anzeigen

Ungelesener Beitrag von Tommy Herrmann »

Es kann manchmal sehr nützlich sein, sich eine kleine Testseite zu basteln, die die Display-Breite von Geräten darstellt.

Ich habe auf dieser Testseite ein JavaScript eingebaut, das die Display-Breite (Seitenbreite) anzeigt, unter dem Header-Block:

https://www.mobirise-tutorials.com/Test ... content7-y


Anzeige Display-Breite.JPG


So kann man z.B. auch am Smartphone mal die Breite für @media Anweisungen kontrollieren oder ermitteln.

Dafür habe ich dieses JavaScript in den Seiteneinstellungen in den Bereich "End of <body> code:" eingebaut:

Code: Alles auswählen

  <script>
        document.getElementById("xx").innerHTML = window.innerWidth + " Pixel";
        window.addEventListener("resize", function () {
         document.getElementById("xx").innerHTML = window.innerWidth + " Pixel";
        });
  </script>

Seiteneinstellungen.JPG


... und dann über dieses <span> Tag </span> innerhalb eines Absatzes <p> Tags </p> die Breite über die id="xx" angezeigt:

<span id="xx"></span>

Beispiel:

Code: Alles auswählen

<p class="mbr-text mbr-fonts-style" mbr-theme-style="display-4" data-app-selector=".mbr-text">Deine Display-Größe:&nbsp;<span id="xx"></span></p>

Display-Breite im Code-Editor.JPG
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 3 Gäste