Haendlerbund_Leistungen_728x90_animiert
Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:

Autor Thema: Responsive Template für Modified  (Gelesen 93574 mal)

Offline noRiddle

  • Experte
  • *****
  • Beiträge: 10.176
  • Geschlecht: Männlich
    • Teile Beitrag
Re: Responsive Template für Modified
« Antwort #390 am: 01. November 2019, 16:29:56 »
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

Haendlerbund_Leistungen_728x90_animiert

Offline Markus

  • modified Team
  • *****
  • Beiträge: 989
  • Geschlecht: Männlich
    • Teile Beitrag
Re: Responsive Template für Modified
« Antwort #391 am: 01. November 2019, 17:35:28 »
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

Offline FräuleinGarn

  • Fördermitglied
  • *****
  • Beiträge: 3.330
    • Teile Beitrag
Re: Responsive Template für Modified
« Antwort #392 am: 04. November 2019, 10:36:58 »
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

Offline fishnet

  • Fördermitglied
  • *****
  • Beiträge: 4.725
  • Geschlecht: Männlich
    • Teile Beitrag
Re: Responsive Template für Modified
« Antwort #393 am: 04. November 2019, 17:26:20 »
Ich weiß zwar nicht worum es gerade geht, aber zum Testen von Handys die man nicht hat, kann man browserstack.com nehmen

Offline FräuleinGarn

  • Fördermitglied
  • *****
  • Beiträge: 3.330
    • Teile Beitrag
Re: Responsive Template für Modified
« Antwort #394 am: 04. November 2019, 21:32:37 »
@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 ]

Offline FräuleinGarn

  • Fördermitglied
  • *****
  • Beiträge: 3.330
    • Teile Beitrag
Re: Responsive Template für Modified
« Antwort #395 am: 05. November 2019, 00:20:59 »
@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

Offline Markus

  • modified Team
  • *****
  • Beiträge: 989
  • Geschlecht: Männlich
    • Teile Beitrag
Re: Responsive Template für Modified
« Antwort #396 am: 05. November 2019, 09:13:29 »
Hi Timm,

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

Markus

Offline Viol

  • Fördermitglied
  • *****
  • Beiträge: 1.485
    • Teile Beitrag
Re: Responsive Template für Modified
« Antwort #397 am: 05. November 2019, 15:51:53 »
Moin Markus,
gibt es den Fix irgendwo zum Download irgendwo?

Offline FräuleinGarn

  • Fördermitglied
  • *****
  • Beiträge: 3.330
    • Teile Beitrag
Re: Responsive Template für Modified
« Antwort #398 am: 05. November 2019, 16:06:09 »
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

Offline Viol

  • Fördermitglied
  • *****
  • Beiträge: 1.485
    • Teile Beitrag
Re: Responsive Template für Modified
« Antwort #399 am: 05. November 2019, 16:20:51 »
@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.

Offline Markus

  • modified Team
  • *****
  • Beiträge: 989
  • Geschlecht: Männlich
    • Teile Beitrag
Re: Responsive Template für Modified
« Antwort #400 am: 05. November 2019, 16:21:15 »
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

Offline FräuleinGarn

  • Fördermitglied
  • *****
  • Beiträge: 3.330
    • Teile Beitrag
Re: Responsive Template für Modified
« Antwort #401 am: 05. November 2019, 16:37:21 »
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

Offline Markus

  • modified Team
  • *****
  • Beiträge: 989
  • Geschlecht: Männlich
    • Teile Beitrag
Re: Responsive Template für Modified
« Antwort #402 am: 05. November 2019, 16:44:17 »
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

Online Tomcraft

  • modified Team
  • *****
  • Gravatar
  • Beiträge: 43.846
  • Geschlecht: Männlich
    • Teile Beitrag
Re: Responsive Template für Modified
« Antwort #403 am: 06. November 2019, 13:56:28 »
[...]
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

Offline Markus

  • modified Team
  • *****
  • Beiträge: 989
  • Geschlecht: Männlich
    • Teile Beitrag
Re: Responsive Template für Modified
« Antwort #404 am: 07. November 2019, 14:17:57 »
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


Teile per facebook Teile per linkedin Teile per twitter

 


             
anything