Problem mit dem Layout meiner Input-Felder

[claus ginsel]

Moin Gunnar

erstmal vielen Dank für deine ausführlichen Bemerkungen.

... findet der Browser vernünftigerweise zu klein und vergrößert das Ganze

Aber genau das passiert ja nicht mit meinem Handy und der Seite, von der die 1. Grafik ist, obwohl die Schriftgrößen ähnlich, vielleicht sogar gleich sind.

Was willst du mit den font-size-Angaben in den Media-Querys bezwecken?

Es ist ja nunmal so, dass ein Zeichen kleiner dargestellt wird bei steigender Pixeldichte, der Text soll aber auch auf dem Handy lesbar sein.

Deine Kommentare bei den Media-Querys deuten stark darauf hin, dass du die Sache falsch angehst. Du versuchst, für ganz spezielle Geräte zu optimieren? Das kann nur schiefgehen.

ich musste mich ja irgendwie da ran tasten, hab dazu halt die mir zur Verfügung stehenden Geräte genommen und festgelegt, dass diese jeweils Durchschnittsgeräte sind.

Und was willst du mit den ganzen Breitenangaben in Prozent bezwecken? ... margin-inline: max(10%, 1em)

Dein Vorschlag ist mir neu, aber cool. Jedoch möchte ich auf Desktops nicht über die gesamte Breite gehen, sondern die Darstellung deutlich schmaler gestalten.

Das <div id="box"> ist überflüssig

Das hab ich mir schon gedacht ;)

Ich sehe <br> als Strukturelement, wie sollte ich stattdessen vorgehen? Andere Block-Elemente, die aber zu anderen Zeilenhöhen führen? Oder alles mit css positionieren?

Und was willst du mit den ganzen Breitenangaben für input[type=text] bezwecken?

Genau das, an den Viewport anpassen. Was eleganter geht, wie Du aufzeigst.

Und wieso überhaupt type=text? Abgesehen davon, dass das im Selektor keine so gute Idee ist (PPS und Folgeposting): Der Screenshot im OP zeigt, dass der Nutzername eine E-Mail-Adresse ist. Dann sollte das Feld auch so beschriftet sein und auf type=email gesetzt werden.

Das hab ich im Selektor, weil die verschiedenen Typen (zumindest in der Vergangenheit) doch unterschiedlich angezeigt werden. Der Screenshot mit der Mail-Adresse, auf den Du verweist, ist nicht meine Seite. Im Übrigen sollte man unbefugten auch so wenig wie möglich Hinweise liefern, welche Eingaben-Formate gerade für die Anmeldung erwartet werden. Der Befugte kennt ja seinen Nutzernamen, egal ob dieser nun einer Mail-Adresse entspricht oder nicht.

Im iPhone gelb. Und wieder: It’s a feature, not a bug. Der Browser macht etwas für Nutzer kenntlich.

Sicher ist es ein Feature, aber ich verweise wieder auf den 1. Screenshot, dort wird der Hintergrund nach Auswahl aus Liste auf meinem Gerät mit demselben Browser auch nicht blau eingefärbt. Also muss man das aushebeln können, aber wie?

Gruß Claus