Piano Player responsive

Als ich mir heute Morgen auf der Fahrt zur Arbeit den Piano Player[EN] auf dem Handy zu Gemüte führe, stelle ich fest, dass das meta-Element viewport nicht genügt, um ihn responsive zu machen.

Nun daheim, mache ich mich an die Arbeit ihn responsive zu machen. Es stellt sich heraus, dass nur der Lyric-Section verändert werden muss. Ich muss mich also noch mit dem Style der Seite befassen.

Das meta-Element viewport

Zur Erinnerung, das meta-Element viewport, das ich schon eingefügt habe, sieht wie folgt aus:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Es wird im Kopf der html-Datei eingefügt.

Den Style anpassen

Den Style passe ich in der CSS-Datei an. Ich füge einen Media-Link ein. Er erkennt die Display-Breite und kommt erst zum Zuge, wenn die Kondition erfüllt ist.

@media screen and (max-width: 420px){
  ...
}

In den Media-Link-Block füge ich die folgenden id’s ein:

  • #lyrics
  • #first-next-line, #second-next-line, #fourth-next-line
  • #third-next-line ;Ist ein Spezialfall;

Im Lyrics-Block passe ich die Breite und die Höhe an.

#lyrics{
  width: 300px;
  height: 360px;
}

Im x-Next-Line-Block passe ich die Position und den linken Aussen-Abstand an.

#first-next-line, #second-next-line, #third-next-line, #fourth-next-line{
  position: static;
  margin-left: 180px;
}

Im Third-Next-Line-Block passe ich das gleiche wie im x-Next-Line-Block an. Dieser Block wird nur benötigt, weil ein verstecktes Element eingeblendet wird.

#third-next-line{
  position: absolute;
  margin-left: 90px;
}

Zusammenfassung

Nun sieht der Piano Player auch auf dem Handy anständig aus. Aber wenn ich ihn nicht veröffentlicht hätte, wäre ich wohl nie darauf gekommen, dass er nicht responsive ist. Da auf meinem Desktop-Rechner in meinem Standard-Browser Chrome in den Entwicklertools alles i.O. ausgesehen hat.

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.