CSS Anpassung für Tablet

[WernerK]

Hallo

eine Webseite soll auf einem normalen Desktop PC / Monitor laufen als auch auf einem 7" Tablet mit 1200 x 800 Auflösung (Pickeldichte 206ppi)

Ich würde gerne die Schriftgröße auf dem Tablet etwas vergrößern und versuche das mit:

@media screen and (max-device-width:1200px) {
    font-size: 18px;
}

Da dies sich nie auswirkt habe ich mal mit Javascript eine Ausgabe gemacht. Hier kommt jetzt anstatt der erwarteten 1200 x 800 aber nur 949 x 545 heraus.

An was liegt das? Wie muss denn die media Angabe heissen dass es nur für das Tablet greift?

var screenWidth = window.screen.width; var screenHeight = window.screen.height; alert('Weite' + screenWidth + 'Höhe' + screenHeight

Gruss Werner

[MrMurphy1]

Hallo

Wie muss denn die media Angabe heissen dass es nur für das Tablet greift?

Mit CSS können Anweisungen nicht auf bestimmte Hardware eingeschränkt werden.

Bewährt hat sich nur die Angabe von Fensterbreiten, alles andere hat sich als Sackgasse erwiesen.

Da dies sich nie auswirkt

Du musst immer auch das Element, die Klasse, die ID oder ... angeben, auf welches sich die Schriftgröße auswirken soll.

Also zum Beispiel

@media only screen and (max-width: 1200px) {
   p {
      font-size: 18px;
   }
}

Gruss

MrMurphy

[at]

Hallo WernerK,

logisch und physisch nachvollziehbar, nur nicht gleichzeitig.

MfG, at

[marctrix]

Hej WernerK,

eine Webseite soll auf einem normalen Desktop PC / Monitor laufen als auch auf einem 7" Tablet mit 1200 x 800 Auflösung (Pickeldichte 206ppi)

Und all die anderen Tablets und Smartphones? Auf denen soll es nicht laufen?

Warum gerade auf diesem Tablet? Smartphones werden sehr viel häufiger verwendet als Tablets!

Ich würde gerne die Schriftgröße auf dem Tablet etwas vergrößern und versuche das mit:

@media screen and (max-device-width:1200px) {
    font-size: 18px;
}

1. möchtest du die Größe des viewports und nicht die Pixel-Anzahl des Gerätes kennen (auf iPads kann ein Browser-Fenster beliebig schmal oder breit sein, gilt sicher auch für andere Geräte)
2. ist es umständlich und schädlich mit dem Layout für den Desktop anzufangen. Besser: lege die schriftgröße für kleine Bildschirme zuerst fest und mit 'min-width: irgendwas‘ dann eine andere Größe für Desktops.
3. innerhalb der Media-query werden vollständige CSS-Regeln notiert — inklusive Selektoren!
4. verwende keine Pixel-Angaben für Schriftgrößen, sondern em oder rem
5. verwende keine Pixel-Angaben für die min-width-Angabe sondern em oder rem. Sonst kannst du nur mit erheblichen Klimmzügen sicherstellen, dass der Content immer vernünftig angezeigt wird, so dass alles im sichtbaren Bereich ist, sich nichts überlappt, Zeilen nie zu lang oder zu kurz werden usw.
6. vergiss niemals: Nutzer können nicht nur zoomen, sondern auch die Schrift vergrößern😉

Da dies sich nie auswirkt habe ich mal mit Javascript eine Ausgabe gemacht. Hier kommt jetzt anstatt der erwarteten 1200 x 800 aber nur 949 x 545 heraus.

JS ist nicht für Layout zuständig.

An was liegt das?

Das ist eine Frage, die keine ist. 😉 CSS erledigt das besser und performanter!

Marc

[Gunnar Bittersmann]

@@WernerK

eine Webseite soll auf einem normalen Desktop PC / Monitor laufen als auch auf einem 7" Tablet mit 1200 x 800 Auflösung

Als auch auf einem Smartphone. Als auch auf einem Fernseher. Als auch auf einer Smartwatch. Als auch auf einer Spielekonsole. Als auch in einem Auto. Das ist das Web:

(Brad Frost)

Ich würde gerne die Schriftgröße auf dem Tablet etwas vergrößern

Warum nur auf Tablets und noch kleineren Geräten? Kann es sein, dass die Schrift bei dir auch auf großen Bildschirmen zu klein ist?

@media screen and (max-device-width:1200px) {

Verwende max-width (ohne device). Gib Breakpoints in em an, nicht in px.

LLAP 🖖

[WernerK]

Hallo alle,

danke für die Tipps. Ich habe das mit dem Javascript nur versucht, um die tatsächliche Breite und Höhe zu ermitteln. Mit ist der Zusammenhang vom Viewport und den 1200 x 800 Breite- Höhenangabe noch nicht ganz klar. ist das dann der Viewport?

Mein Fehler lag tatsächlich daran das ich den Element Namen (hier body) vergessen hatte.

Gruss Werner

[marctrix]

Hej WernerK,

danke für die Tipps.

Stellvertretend für die andere: Sehr gerne!

Wenn du mal Zeit hast, lies dir zu dem einen oder anderen Punkt mal ein bisschen Hintergrund-Wissen an.

Kommt aber auch mit der Zeit von fast selbst. Es ist ja unmöglich, sich Tutorials oder ähnliches anzuschauen ohne immer wieder auf die Vorteile von em usw hingewiesen zu werden. Das wird schon!

Ich habe das mit dem Javascript nur versucht, um die tatsächliche Breite und Höhe zu ermitteln.

Wovon? Vom Gerät? Oder vom Browserfenster?

Mit ist der Zusammenhang vom Viewport und den 1200 x 800 Breite- Höhenangabe noch nicht ganz klar. ist das dann der Viewport?

Der Viewport ist der Bereich des Browsers, in dem die Webseite angezeigt wird.

Mein Fehler lag tatsächlich daran das ich den Element Namen (hier body) vergessen hatte.

Passiert mir heute noch manchmal: sobald ich die geschweiften Klammern geschrieben habe, schalte ich in den "Design"-Modus und denke nur noch da dran, wie etwas aussehen soll, statt dem Browser erst mal zu sagen, was überhaupt gestaltet werden muss.

Übrigens kann man auch für das Wurzel-Element html Formate definieren. Es kann sinnvoll sein das gerade für Schriften zu nutzen. Es kommt darauf an, ob und wie du rem verwendest, das sich auf die Schriftgröße des Wurzel-Elementes bezieht (das 'r' in rem steht für root)

Marc

[Matthias Scharwies]

Servus!

Mit ist der Zusammenhang vom Viewport und den 1200 x 800 Breite- Höhenangabe noch nicht ganz klar. ist das dann der Viewport?

Ja, wobei du den Viewport, wie schon gesagt, in der relativen Größe em messen solltest.

Die Media query richtest du nur an der Breite aus; der Inhalt passt sich flexibel an diese an und wird entsprechend länger oder kürzer. Deshalb solltest du keine festen Breitenangaben und gar keine Höhenangaben festlegen.

Herzliche Grüße

Matthias Scharwies