Responsive Template für Modified

[noRiddle (revilonetz)]

Information:
Nach MozillaDeliveryNetwork Web Docs ist device-aspect-ratio deprecated und man muß jederzeit damit rechnen, daß es Browser nicht mehr unterstützen.

Gruß,
noRiddle

[Markus]

Hi,

@noRiddle
das hatte ich auch gesehen ... das wäre auch erstmal nur ein Test ob es überhaupt funktioniert.
Ggf. muss ich mal genauer googlen um rauszukriegen was es da mit iOS alles gibt wo gezoomt wird.

@Timm
Bei deinen Angaben zündet das ganze auch auf einem Android Handy und die Schrift wird so extrem groß.
Die Felder werden bei dir nur nicht größer weil sie von der Höhe her auf eine feste Pixelanzahl gestellt sind ... aber der Effekt ist unschön .. gerade bei der Registrierung mit dem SumoSelect denn da bleibt die Schrift klein.

Markus

[Timm]

Hallo Markus,

ich hab noch kein Android Handy in die Finger bekommen, um zu testen und eine vernünftige Antwort zu schreiben. Hoffe ich bekomme heute eines zum testen.

Gruß Timm

[fishnet]

Ich weiß zwar nicht worum es gerade geht, aber zum Testen von Handys die man nicht hat, kann man browserstack.com nehmen

[Timm]

@fishnet
danke, aber für die paar Mal testen brauch ich keine kostenpflichtige Software.

@markus
Ich hab nun mal ein Samsung Galaxy S6 mit Android 8 in die Hände bekommen. Dabei ist mir aufgefallen, dass man im Demoshop links nach Klick aufs Burgermenü die Loginbox nicht ausfüllen kann, weil man nicht weit genug runterscrollen kann. Man sieht zwar noch die Loginfelder aber wenn man darauf klickt, werden diese von der Tastatur überdeckt. Und man kann nicht weiter nach unten scrollen um sie anzuzeigen. Nur wenn man vorher auf einen der Pfeile für Rezensionen, Hersteller und Währungen klickt und diese sich öffnen, dann kann man das weiter runterscrollen und die Loginbox erscheint weit genug oben.

Deshalb fände ich es sinnvoll die Boxen immer geöffnet zu lassen in der mobilen Ansicht. Oder eine andere Lösung, wie du sie mir vorgeschlagen hattest wegen meinem Shopvotebanner unten, wodurch ich auch nicht zu allen Boxen scrollen konnte unten in der Seitenleiste. Obwohl das auf dem Android Telefon bei meiner Seite auch nicht wirklich geholfen hat, weil der Shopvotebanner über der Tastatur noch ne Menge Platz wegnimmt. Aber man kann es immerhin ausfüllen. In IOS verschwindet der Shopvotebanner sobald man ins Loginfeld klickt und die Tastatur sich öffnet. Werde den wohl rausschmeißen müssen und gegen eine Grafik im Footer ersetzen.

Gruß Timm

[ Für Gäste sind keine Dateianhänge sichtbar ]

[Timm]

@Markus
Ich hab es nun endlich geschafft deinen Vorschlag

Code: CSS  [Auswählen]

@media screen, (device-aspect-ratio: 2/3), (device-aspect-ratio: 40/71), (device-aspect-ratio: 375/667), (device-aspect-ratio: 9/16) {
  select, textarea, input[type="text"], input[type="password"], input[type="email"], input[type="tel"] {
    font-size: 16px;
  }
}

zu testen.

Es wird nicht mehr gezoomt in iOS bei Eingabefeldern.

Getestet mit:
iPhone 11 Pro in Safari, Chrome und Firefox
iPhone 5s, 6s und 7 nur mit Safari getestet

Ich find die Lösung aber nicht optimal, weil sie erstens nur etwas Zeit bringt, bis device-aspect-ratio nicht mehr unterstützt wird und zweitens weil es sicherlich auch Android Telefone mit diesen Seitenverhältnissen gibt. Vor allem 2zu3 und 9zu16 und dort dann unnötig die Schrift vergrößert wird.

Die einzigen Stellen wo es wirklich auffällt sind tatsächlich die Stellen, wo ein normales Eingabefeld auf ein Sumoselect Feld trifft. Also in der Registrierung bei Anrede und Land.

M.m.n. wäre die beste Lösung die Schrift für Eingabe und Sumoselect Felder komplett auf 16px zu erhöhen und die Boxen gegebenenfalls daran anzupassen. Dann hätte man eine Lösung, die auf iOS und Android gleich ist und bei iOS das zoomen verhindert.

Falls durch größere Inputfelder zuviel Platz benötigt wird bei der Registrierung zb., dann könnte man die Feldernamen auch in die Felder verlegen wie es zb hier gemacht wird: Apple ID erstellen.

Ich hab bis auf Amazon wo trotz 15px nicht gezoomt wird (vielleicht ist die Seite mobil nochmal anders als die im Browser zusammengeschobene Desktopvariante) keine Große Seite gefunden die für die Suche Schriften kleiner 16px oder 1rem nutzt. Selbst Google nutzt 16px. Das muss doch daran liegen, dass sie das Zoomen verhindern wollen.

Oder spricht etwas ganz anderes gegen 16px für Eingabe und Sumoselect Felder?

Gruß Timm

[Markus]

Hi Timm,

das mit der Sidebar und der Login-Box sollte durch r12374 gelöst sein.

Markus

[Viol]

Moin Markus,
gibt es den Fix irgendwo zum Download irgendwo?

[Timm]

Hallo Markus

Bei Nutzung von Sonderpreis und VPE überschneiden sich die Angaben.

[ Für Gäste sind keine Dateianhänge sichtbar ]

Ich guck mal ob ich heut Abend ein Android Telefon vom Nachbarn bekomme, um mir den Fix anzugucken. In iOS ist auf jeden Fall nun massig Platz zum scrollen unten im Menü. Sollte funktionieren.

Gruß Timm

[Viol]

@Timm,
brauchst Du nicht mehr 
Im Demoshop funktioniert jetzt die Eingabe mit Android Smartphone (Huawei Mate 10 pro mit Android 9.1)
Ich fände es noch besser, wenn mit dem Aufploppen der Tastatur die Eingabefelder für Email und Passwort automatisch nach oben verschoben werden.

[Markus]

Hi Viol,

gibt es den Fix irgendwo zum Download irgendwo?

Template-Ordner /css/
Da gibts eine jquery.sidebar.css

suche:

Code: CSS  [Auswählen]

  #col_left {
    display: block;
    padding:10px;
    background:#fafafa;
    width:280px;
  }

ersetze mit:

Code: CSS  [Auswählen]

  #col_left {
    display: block;
    padding:10px 10px 300px 10px;
    background:#fafafa;
    width:280px;
  }

Das wars auch schon.

Markus

[Timm]

Und die -3 glaub nur ein zwei Zeilen darüber ist auch geändert worden. Ist das für was anderes? Bin grad unterwegs und kann die Stelle nicht genau nennen. War was mit col left und overlay.

Und das col left padding bottom 65px kann ich dann wieder aus meiner mediaqueries.css entfernen, oder?

Gruß Timm

[Markus]

Hi Timm,

nicht in dem Zusammenhang. Das muss was anderes gewesen sein. Das Problem an der Stelle war ja nur dass man nicht mehr scrollen konnte weil nichts mehr zum scrollen da war. Die Tastatur legt sich einfach drüber und weil der Container so eigentlich passt konnte man nicht mehr nach oben scrollen. Deshalb hat der jetzt einfach ein padding nach unten bekommen. Damit kannst du dann nach oben scrollen um die Daten in die Felder einzugeben.

Markus

[Tomcraft]

[...]
Bei Nutzung von Sonderpreis und VPE überschneiden sich die Angaben.
[...]

Hallo Markus,

das hattest du gesehen? Ich kann das bei uns im DEV-Demoshop nachvollziehen.

Grüße

Torsten

[Markus]

Hi,

[...]
Bei Nutzung von Sonderpreis und VPE überschneiden sich die Angaben.
[...]

Das mit der VPE und dem Sonderpreis ist nun auch korrigiert in r12379.

Markus