Schriftgröße auf Mobil-Geräten (Smartphones) kleiner skalieren.

    Eine Frage hätte ich vorerst noch:
    ist es möglich, die Schriftgröße in der mobilen Ansicht auf Smartphones kleiner zu skalieren? Die Überschriften sind jedenfalls sehr groß dargestellt, sodass diese meistens 2-Zeilig sind, auch den Artikel-Text würde ich in Relation dazu gerne etwas kleiner darstellen.

    Ich verwende die Vorlage "Flat Responsive Nature" und habe in den Layout-Einstellungen keine Funktion gefunden, die darauf hinweist.

    Gruß,
    Christian

    Folgendes CSS bewirkt Projektübergreifend das auf Bildschirmen mit einer kleineren Breite als 620 Pixeln diese Werte übernommen werden.

    Einstellungen > CSS

    CSS
    <style>
@media (max-width: 600px) {
  h1 {font-size:2em;}
  h2 {font-size:1.6em;}
  h3 {font-size:1.2em;}
  p {font-size:.9em;}
}
</style>

    Vielen Dank für die Antwort.
    Ich bin jetzt erst dazu gekommen, dass ich mich mit dem Projekt beschäftige und nach den Antworten gesucht, habe es also erst jetzt gesehen.

    LG Christian

    Ohne es schon getestet zu haben: Bei den meisten aktuellen Smartphones ist die Auflösung in der Breite aber deutlich mehr als 600 bzw. 620 px - um nicht zu sagen ähnlich einer gängigen Monitorauflösung. Kann dieser Wert auch angepasst bzw. nur für die mobile Ansicht spezifiziert werden?

    Hallo Christian,

    die physische Anzahl der Pixel spielt beim Smartphone in der Wiedergabe von Webseiten eine untergeordnete Rolle. Bei allen Handybrowsern wird die Webseite automatisch soweit gezoomt, dass, bezogen auf den normalen Abstand zwischen Handy und Auge, in etwa die gleiche Schriftgröße erreicht wird wie bei Betrachtung eines Monitors mit dem üblichen Abstand zum Auge. Ohne responsive Design würde also nur etwa ein Viertel des Bildschirminhaltes angezeigt werden mit einem Scrollbalken zum seitlichen verschieben.

    Die von Mario verwendeten 600px sind in der Mehrzahl der Geräte also passend. Falls es beim Kunden eine Präferenz für bestimmte Endgeräte gibt, kann man mit diesem Wert sicherlich noch experimentieren, dann kann es aber passieren, dass die Ansicht auf anderen Geräten nicht mehr stimmt.

    ok, vielen Dank für die Informationen.
    Eine Frage zur Smartphone-Ansicht noch: Kann man die Höhe vom Bilder-Banner im Header auch anpassen?

    Hallo Christian,

    Das sollte über angepasstes CSS möglich sein. Vermutlich können da Mario oder elch behilflich sein. Als Hinweis für die Beiden: es wird flat responsive verwendet.

    Salut zusammen

    Zitat

    Kann man die Höhe vom Bilder-Banner im Header auch anpassen?

    Christian_88, ich verstehe leider nicht so richtig, was Du mit Bilder-Banner meinst.

    Möchtest Du, dass die Kopfgrafik (Slider) in der mobilen Ansicht nicht "beschnitten" wird, so könnte Dir dies hier eventuell helfen.

    Möchtest Du die Kopfgrafik allgemein in der Höhe ändern, so geht das im Layout-Designer: Layout -> Kopfgrafik -> Höhe. Danach dann die bereits eingefügten Bilder direkt in der LiveView (nochmals) bearbeiten/zuschneiden.

    Sollte der Bannerbereich selbst gemeint sein, dann wird es komplizierter und - je nachdem was Du ganzgenau erreichen möchtest - ziemlich tricky... vermutlich :)

    Viele Grüsse in die Welt

    elch

    Zeta Producer 17.x - Express

    Website, zu einer nicht primär gewinnorientierten und/oder ernst zu nehmenden Nebentätigkeit: Heubeere.ch ;)
    (PS: "ß" gibt es nicht - und kann ich nicht. Sorry!)

    Vielen Dank für die Hilfe, ersteres war gemeint!
    Das Problem ist nun aber, dass das Bild zwar passt, darunter aber so viel Platz frei bleibt, wie das Bild ursprünglich hatte (siehe auch die Visualisierung - die Punkte).

    Sorry, aber CSS beherrsche ich gar nicht.. :(

    EDIT: Problem gelöst, siehe: RE: Flat Responsive - Kopfgrafik wird auf schmalen Bildschirmen beschnitten

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden