Ingrid: @media, Bildschirmbreite und Smartphones

Beitrag lesen

Hallo!

Erst einmal herzlichen Dank für Eure Antworten. Ich bitte Euch um Entschuldigung, dass ich mich erst jetzt zurückmelde. Aber ich hatte einige unvorhergesehene berufliche und familiäre Verpflichtungen. Und ich wollte auch nicht in wenigen Minuten auf Unverdautes antworten, und noch dazu durch die Übereilung unklar formuliert. Denn dann hättet Ihr Zeit mit manchen Eurer Antworten verloren.

Von dem Unterschied der Bildschirmpixel und der CSS-Pixel hatte ich noch nie etwas gehört. Wie ich diese Information praktisch verwenden soll, weiß ich noch nicht.

Und dann ist da noch das Problem, dass ich es nicht schaffe, das Smartphone mit media-queries anzusprechen. Auf XAMPP funktionniert es: Wenn ich den Bildschirm probehalber zusammenschiebe, verändern sich die Eigenschaften entsprechend den @media-Vorgaben.
Aber auf dem echten Smartphone ändert sich der Bildschirm nur, wenn ich die Eigenschaften bei Computer-großer em-Breite verändere. Aber ich will andere Eigenschaften für die Smartphone-Version als für die Computer-Version.
Und die automatischen Voreinstellungen des Smartphones passen mir überhaupt nicht: Da werden beispielsweise die <p> in normaler Größe anzeigt, während die <li> und die <td> seltsamerweise auf Lupengröße verkleinert werden.

Ganz konkret geht es mir um folgende Fragen:

  • Wie soll ich es konkret schaffen, beispielsweise einzelne Fotos für die Smartphone-Version zu unterdrücken, um das Datenvolumen zu erleichtern, wenn ich nicht weiß, wie ich die Smartphone-Version tatsächlich ansprechen kann? (Ich übertreibe es nicht mit dem Datenvolumen, aber manche Fotos sind auf der großen Computerbildschirmfläche durchaus willkommen, während sie nicht unbedingt nötig für die Smartphone-Version sind.)

  • Wie kann ich es konkret vermeiden, dass die Navigationsleiste in der Smartphone-Version waagrecht angezeigt wird (mit winzigen Buchstaben, für die ein guter Teil der Benutzer zoomen muss), während große Teile der restlichen Texte von vorherein in normaler Schriftgröße angezeigt werden? Was soll ich machen, damit die Navigationsleiste senkrecht angezeigt wird und die gesamte Smartphone-Bildschirmbreite einnimmt? (Um kein Missverständnis aufkommen zu lassen: Ich weiß, wie man die Navigationsleiste waagrecht oder senkrecht programmieren kann. Aber mir fehlt das Wissen darüber, wie ich es machen kann, damit eine andere Version auf dem Computer als auf dem Smartphone erscheint.)
    Irgendwie schaffe ich es nicht, die Buchstabengröße u. ä. bei der Smartphoneversion zu beeinflussen. Dies ist unter anderem deshalb ärgerlich, weil das Smartphone die <p> in normaler Größe anzeigt, während es die <li> und die <td> seltsamerweise auf Lupengröße verkleinert.

Ich wünsche Euch noch einen schönen Tag.

Herzliche Grüße
Ingrid