Antworten auf deine Fragen:
Neues Thema erstellen

Android & iOS: Font-Size

Hi,

habe ein Problem. Die Schrift wird bei mir auf Android anders dargestellt als auf iOS (und umgekehrt).
Wie kriege ich die beiden auf die gleiche Größe?
Screenshots:


Code:
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>empty</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
    <style>
        #test{
            top:0;
            left:0;
            position:fixed;
            background:yellow;
            height:50px;
            width:100%;    
        }
            #test .yes{
                background:green;
                line-height:50px;
                height:50px;
                width:auto;
                font-size:40px;
                color:#fff;
            }
    </style>
</head>
<body>
<div id="test"><div class="yes">▼</div></div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.   

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
</body>
</html>
// EDIT: -webkit-text-size-adjust:none; habe ich bereits ausprobiert. Das half nur nach Orientation-Change.
 
Zuletzt bearbeitet:

AW: Android & iOS: Font-Size

Das hat nichts verbessert sondern verschlechtert, aber ich denke das weißt du da ich ja den Code zum ausprobieren mitgepostet habe.
 

schokomueller

Hab' nicht ausgelernt.

AW: Android & iOS: Font-Size

Du hast ja sowohl #test als auch #yes mit Höhe = 50px definiert. Beachte hierbei nebenbei auch die verschiedenen Pixeldichten bei iPhone / Android. Aber das weißt du ja bestimmt sowieso.

Nun aber zu deinem Problem. Ich würde mal den Pfeil als CSS definieren oder als Bild hinterlegen, da so ein Symbol von verschiedenen Geräten anders angezeigt werden kann (Siehe Emoticons iPhone <--> PC). Ich kann das aber leider gerade nicht selbst ausprobieren.
Siehe das dann auch hier weiter unten: http://sgaul.de/2012/01/09/moderne-pfeile-mit-css/

Vielleicht hilft das ja schon, mal schauen.
 
AW: Android & iOS: Font-Size

Du hast ja sowohl #test als auch #yes mit Höhe = 50px definiert.
Ja?
Beachte hierbei nebenbei auch die verschiedenen Pixeldichten bei iPhone / Android. Aber das weißt du ja bestimmt sowieso.
Ja, jedoch weiß ich nicht wie ich diese auf den gleichen Stand bekomme (mit CSS)?
Danke ich werds mir mal anschauen.
 
AW: Android & iOS: Font-Size

Also, unabhängig von Alternativlösungen würde mich jetzt noch interessieren, wie das Problem direkt gelöst werden kann?
 

schokomueller

Hab' nicht ausgelernt.

AW: Android & iOS: Font-Size

Ja, jedoch weiß ich nicht wie ich diese auf den gleichen Stand bekomme (mit CSS)?
Das weiß ich leider auch nicht... vllt. mit Media Queries ?

Danke ich werds mir mal anschauen.
Und, hast du es auch angewendet? Wie gesagt, Emoticons wie nachfolgende werden auch nicht überall korrekt angezeigt:
Edit:// Hmmm, die Symbole werden hier wohl nicht gespeichert — deshalb gibt es hier leider auf nichts zu sehen... Ist nicht das, was ich wollte...
Edit2:// Das ist das, was ich meinte:

������������������➡️▶️✉️������
 
Zuletzt bearbeitet:
AW: Android & iOS: Font-Size

Und, hast du es auch angewendet? Wie gesagt:
Nein, da ich verschiedene Aktionen mit dem "Text" durchführe habe ich es bildlich gelöst
Emoticons wie nachfolgende werden auch nicht überall korrekt angezeigt
Orientiere dich nicht an fehlerhaften Seiten. Meine Projekte sind (und sollen es weiterhin) fehlerfrei sein.

Warte wir mal auf Antwort, ob es noch jemanden gibt den vielleicht eine Lösung mit der DPI anbietet
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.565
Beiträge
1.538.067
Mitglieder
67.488
Neuestes Mitglied
Andrew56524
Oben