nicht angemeldet
Gunnar Bittersmann@@claus ginsel
Klicke ich da rein, dann passiert folgendes, Das Feld wird schmaler und der Text wird größer
Das Verhalten kann ich auf dem iPhone nachvollziehen. Und dir sagen: It’s a feature, not a bug. Der Browser vergrößert das Eingabefeld, um die Schrift auf lesbare Größe zu bringen. Du setzt die Schriftgröße für input auf 1.3em, aber vorher unsinnigerweise die für html auf 11px. Und 1.3 × 11px = 14.3px findet der Browser vernünftigerweise zu klein und vergrößert das Ganze.
Was willst du mit den font-size-Angaben in den Media-Querys bezwecken?
Und was mit den font-family-Angaben? Da die immer gleich sind, haben die nichts in den Media-Querys zu suchen. DRY – don’t repeat yourself!
Und die Reihenfolge ergibt wohl auch keinen Sinn. Oder gibt es Systeme, auf denen weder Helvetica noch Arial installiert ist, aber Geneva? Helvetica und Arial sind auch keine gut lesbaren Schriften, außerdem pottlangweilig. Ich würde sie nicht verwenden.
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.
Und was willst du mit den ganzen Breitenangaben in Prozent bezwecken? Anstatt 80% anzugeben und für andere Viewportbreiten andere Prozentwerte, machst du besser 10% Rand, aber mindestens bspw. 1em: margin-inline: max(10%, 1em).
Das <div id="box"> ist überflüssig (@at sagt: bedauerlich bis ärgerlich), ebenso die ganzen <br> (macht Geräusche).
Und was willst du mit den ganzen Breitenangaben für input[type=text] bezwecken? Sinnvoll ist es, die Breite auf eine gewisse Zeichenanzahl zu begrenzen, aber das Feld nicht breiter werden zu lassen als der Viewport hergibt: width: min(30ch, 100%).
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.
Hinzu kommt, dass wenn ich aus den Browservorschlägen auswähle, der Hintergrund blau eingefärbt wird
Im iPhone gelb. Und wieder: It’s a feature, not a bug. Der Browser macht etwas für Nutzer kenntlich. Ob dir das gefällt, ist irrelevant. Der Wurm muss dem Fisch schmecken, nicht dem Angler.
🖖 Живіть довго і процвітайте
Ad astra per aspera