Tile Visu: Schriftgröße in HTMLBoxen (Web vs. iOS APP)

[pitti]

Hallo zusammen,

das Problem mit der zu großen Schriftgröße in HTML Boxen auf dem iPad ist ja immer noch da.

Habe mal etwas mit Javscript rumgespielt und mal die Default-Styles einer HTMLBox ausgelesen und angezeigt:

Im Web (Desptop Chrome):

<style>
/* Poppins Regular */

@font-face {
font-family: "Poppins";
src: url("./preview/assets/google_fonts/Poppins-Regular.ttf") format('truetype');
font-weight: 400;
font-style: normal;
}

/* Poppins italic */

@font-face {
font-family: "Poppins";
src: url("./preview/assets/google_fonts/Poppins-Italic.ttf") format('truetype');
font-weight: 400;
font-style: italic;
}

/* Poppins bold */

@font-face {
font-family: "Poppins";
src: url("./preview/assets/google_fonts/Poppins-Bold.ttf") format('truetype');
font-weight: 700;
font-style: normal;
}

body {
color: #ffffff;
font-size: 14px;
font-family: 'Poppins';
}
</style>

In der App auf dem iPad:

<style>
/* Poppins Regular */

@font-face {
font-family: "Poppins";
src: url("./preview/assets/google_fonts/Poppins-Regular.ttf") format('truetype');
font-weight: 400;
font-style: normal;
}

/* Poppins italic */

@font-face {
font-family: "Poppins";
src: url("./preview/assets/google_fonts/Poppins-Italic.ttf") format('truetype');
font-weight: 400;
font-style: italic;
}

/* Poppins bold */

@font-face {
font-family: "Poppins";
src: url("./preview/assets/google_fonts/Poppins-Bold.ttf") format('truetype');
font-weight: 700;
font-style: normal;
}

body {
color: #ffffff;
font-size: 28px;
font-family: 'Poppins';
}
</style>

Der Unterschied ist die font-size im body (14px vs. 28px)!!!

Woher kommt das? Bug? Gewollt?

Deshalb sehen meine HTMLBoxen auf dem iPad alle nicht so dolle aus.

VG Heiko

[pitti]

Hier mal ein Beispiel

Desktop:

App:

Gruß Heiko

[Dr.Niels]

Prinzipiell ist das bewusst, da die Apps intern einen Zoomfaktor für die Schrift haben. Damit also die Standardgröße von 14px also auch in den Apps in der HTMLBox konsistent ist, wird der Zoomfaktor der App da mit reingerechnet. So zumindest die Theorie… Bei meiner Android-App funktioniert das auch wunderbar… Wir schauen uns mal an, was iOS da macht

[Boui]

Dr.Niels, Du musst dich zwingend auf den nächst höheren Level heben. Android, Windows,… das hat doch alles keine Zukunft.

Ganz nette Grüße
Andreas

[Dr.Niels]

So, ich habe das auch gerade mal mit iOS getestet. Da sind vielleicht leichte Differenzen, aber die Schriftgröße in einer Textbox und einer HTML-Box sind nahezu gleich. Kannst du es mal mit einer ganz einfachen HTML-Box wie

<div>Test</div>

ausprobieren und die einfach neben oder über einer gleichgroßen Textbox-Kachel mit dem gleichen Text platzieren und schauen wie das aussieht?

[pitti]

Moin @Dr.Niels,

habe es gestern nicht mehr geschafft Bilder Online zu stellen. Liefere ich noch nach.

Was ich aber schon sagen kann ist, das Problem scheint kein generelles zu sein, d.h. auf dem iPhone passten die Schriften und die Darstellung, aber auf dem iPad passt es aber eben nicht. Da wird auch der einfache DIV viel zu groß dargestellt.

Wie gesagt Bilder liefere ich nach.

Gruß Heiko

[pitti]

So jetzt noch die Screens …

1. iPhone

2. iPad

PS: auch das Zitat des Tages ist viel zu groß

Gruß Heiko

[pitti]

Hier auch noch mal mit dem Ursprungsthema zusammen …

[Dr.Niels]

Hast du auch sicher bei der Textbox das ~TextBox-Profil gesetzt? Denn die sollte eigentlich auf Schriftgröße 14 sein… Reguläre Strings passen sich im Vergleich dazu an die Größe der Kachel an und danach sieht es hier eher aus. Ansonsten starte ich gleich mal den iPad-Simulator und schaue was da passiert.

[pitti]

Sorry, Du hast natürlich recht … aber jetzt …

Was ich aber gerade rausgefunden habe, wenn man selber nochmal den font-size für den body setzt dann passt es …

<style>
body { font-size: 14px; }
</style>

Sehr merkwürdig!

[Dr.Niels]

So, ich habe nochmal ein bisschen rumexperimentiert. Scheinbar macht iOS hier wirklich einfach mal sein eigenes Ding, juhu… Ich habe zur nächsten Version mal eine Heuristik gebaut, die das hoffentlich besser hinbekommt. Auf meinen Testgeräten sah es gut aus, aber probier das dann gerne mal aus

[da8ter]

Bin mir nicht sicher ob es hier hin passt. Ich habe auch schriftgrößen durcheinander wenn ich den Browser zwischen meinem 5k Apple Display und dem normalen Full hd Bildschirm hin und her schiebe. Ich möchte eine visu für meinen touchschreen bauen. Der ist hochkant mit Full hd. Ich stelle den Browser auf dem 5k Display auf 1080x1920px ein. Passe die ganzen schriftgrößen der html Boxen an. Z.b. 0.5em. Alles ist super… dann ziehe ich das Fenster auf den Full hd Monitor und die Schriften sind plötzlich alle winzig klein. Ich bin mir sicher das ihr da eine logische Erklärung für hab, zum arbeiten ist es trotzdem suboptimal. Wollte mich jetzt eigentlich nicht einen Tag lang vor den touchscreen stellen und da alles einrichten…

[pitti]

Hi @Dr.Niels ,

bin gerade erst dazu gekommen mir die neue Version auf dem iPad anzuschauen … was soll ich sagen … jetzt sieht das Ergebnis wie auf dem PC aus

Good job

Werde Dich aber nochmal bei einer anderen HTML (Size) Sache benötigen - demnächst in diesem Theater

Danke & Gruß
Heiko

[Dr.Niels]

Jaja, warum sollten sich auch alle Plattformen einheitlich verhalten…

[da8ter]

hier mal ein zwei Beweisfotos

Mac Studio mit Apple Studio Display (5120x2880px) + Iiyama PL279H (1920x1080px)

27 Zoll Full-HD Bildschirm

Dann schiebe ich das Browserfenster auf das 5K Apple Display

Im HTML Code (Beispiel Waschmaschine) ist die Schrift mit „font-size: 0.8em;“ angegeben.

Viele Grüße
Stephan

[Dr.Niels]

Ich kann mir vorstellen, dass die beiden Bildschirme einen unterschiedlichen Zoom-Faktor drin haben, der beim rüberschieben aber nicht aktualisiert wird. Wie sieht es denn aus, wenn du die Seite direkt auf dem großen Bildschirm öffnest? Sieht es dann besser aus?