Skalierung der Webseiten von TabletUI

[Florian Felix]

Hallo zusammen,

ich hab jetzt schon viel probiert und versucht, aber so richtig schlau bin ich noch nicht geworden.

Es geht um die Skalierung auf verschiedenen displays und um Pixel, DPis etc. Ich hoffe mir kann jemand Klarheit verschaffen.

Generell möchte ich folgendes:
Die Oberfläche soll auf verschiedenen Geräten gut angezeigt werden ohne sich irgendwie zu verschieben und zwar so, dass die ganze Seite immer gefüllt wird.

Ich weiß verschiedene Monitore haben verschiedene Auflösung. Also kann man ja erstmal nicht mit Pixeln direkt arbeiten.
Ich habe z.b. einen Laptop mit 1440px und einen Monitor mit 1920px. Die Oberfläche soll so werden, dass man auf dem Laptop alles gut lesen kann. Öffnen ich das am Monitor willl ich das alles komplett gezoomt wird und dann halt fürs Auge zu groß ist. Bei mir blenden sich dann aber schwarze Balken ein. Das finde ich blöd.

Ich hatte auch mal, dass sich die Widgets zwar an den Monitor in der Breite angepasst haben, aber die Schrift und Bilder blieben gleich groß
Ich hoffe einer der HTML Spezies hier kann mir weiterhelfen.

Ach genau und auf dem Handy nehme ich halt in Kauf, dass es vielleicht unleserlich klein ist, aber da kann man ja mit 2 Fingern ohne Probleme zoomen. Nur ka, wie das auf dem PC geht.

Beste Grüße,
Florian

[dt2510]

Ich habe mir zu diesem Zweck eine user.css gebaut, in der ich Schrift- und Icongrößen bzw. feste Positionen mit vh und vw (%-Angaben der Bildschirmhöhe und -breite) definiere. Das funktioniert einwandfrei.
Hier ein Paar Beispiele:

Code Auswählen Erweitern

.iconnormal{
  font-size:2vh;
}

.iconlarge{
  font-size:2.5vh;
}

.iconbig{
  font-size:7vh;
}

.fontsmall{
  font-size:1vh;
}

.fontnormal{
  font-size:2vh;
}

.fontlarge{
  font-size:3vh;
}

.fontbig{
  font-size:4vh;
}

.main_header{
  position: absolute;
  width:    100vw;
  height:   10vh;
}

.main_content{
  position: absolute;
  top:      10vh;
  width:    100vw;
  height:   80vh;
}

.main_footer{
  position: absolute;
  top:      90vh;
  width:    100vw;
  height:   10vh;
}

Im html-Code müssen die Größen oder Positionen per class= im <div> Tag angegeben werden.