Schriftgröße sowie Position unterschiedlich

[stefan]

Hi Leute, ich versuche gerade eine Seite in Responsive Design zu schreiben. Grundsätzlich funktioniert sie ja schon. Nur jetzt hab ich das Problem mit der Schriftgröße. Gesetzt wird sie mit font-size: 7vh; Schau ich sie mir am Handy an Galaxy s4 mini passt die Schriftgröße auch die Platzierung der Elemente, wenn ich es mir am Galaxy a5 anschaue passt die Platzierung nicht mehr, gleich beim Sony. Auf IPhone 4-6 passt wiederum alles.

Hier die Links zum besseren Verständnis:

benwillgruber.com/stefanseite/test/galaxy_s4_mini.png --> alles ok
benwillgruber.com/stefanseite/test/google_nexus_10_emulator.png --> alles ok
benwillgruber.com/stefanseite/test/wrong_galaxy_a5.jpg --> Falsche Darstellung
benwillgruber.com/stefanseite/test/sony_xperia_z2.jpg

Kann mir bitte einer helfen und mir erklären wie es zu den unterschieldichen Darstellungen kommt?

Danke

CSS:
* { box-sizing: border-box;}

body {
	background-color: #3C3C3B; /* Dunkel Grau */
	padding: 0px;
	margin: 0px;
	overflow: hidden;
	width: 100vw;

}

#benjaminwillgruber {
	float: left;
	width: 50%;
	height: 16vh;
	padding-left: 10px;
	overflow: hidden;
	border: 1px solid #ff0000;
}

#benjamin {
	font-size: 7vh;
	color: #ffffff;
	
}

#willgruber {
	font-size: 7vh;
	color: #ffffff;
	
}

HTML:

<div id = 'benjaminwillgruber'>
	<div id = 'benjamin'>
		<font style = "font-family: 'avril'">Benjamin</font>
	</div>
	<div id = 'willgruber'>
		<font style = "font-family: 'avril'">Willgruber</font>
	</div>					
</div>

[Auge]

Hallo

Kann mir bitte einer helfen und mir erklären wie es zu den unterschieldichen Darstellungen kommt?

Die Einheit vh bezieht sich auf die Höhe des Viewports. Deine 7vh entsprechen 7% der Viewporthöhe des Browsers. Die Schriftgröße verändert sich also abhängig von der Höhe des Viewports, was bei unterschiedlichen Displays, unterschiedlichen Browsern und unterschiedlichen Browserfenstergrößen zu unterschiedlichen Schriftgrößen führt.

Für Schriftgrößen ist vh als Einheit in den allermeisten Fällen nicht die beste Wahl. Mit em bzw. rem machst du deine Schriftgröße von den (meist unveränderten) Schriftgrößeneinstellungen des Browsers des Nutzers abhängig. Damit verändert sich die Schriftgröße eventuell je Browser, sie ist aber in des Nutzers einem Browser unabhängig von der Viewportgröße immer gleich.

Noch ein paar allgemeine Kritikpunkte.

• Die Schriftfamilie kannst du auch ohne das vorsintflutliche MSIE-Element font festlegen. Du kannst es z.B. an das Elternelement (#benjaminwillgruber) oder direkt an die einzelnen divs (#benjamin, #willgruber) vergeben. Damit fiele font weg.
• Zudem gehört diese Angabe, wie alle anderen Angaben, in das Stylesheet und nicht als Attribut in das Element.
• Da nicht jeder die Schriftart installiert hat oder das Herunterladen von Schriften erlaubt, gib bitte noch alternative Schriftarten und eine generische Familie (hier sans-serif) an.
• Die Anführungszeichen um den Schriftartnamen brauchst du nur, wenn der Name Leerzeichen enthält.
• Du kannst übrigens gleiche Vorgaben für mehrere Elemente zusammenfassen.

#benjaminwillgruber {
        /* die anderen Angaben */
        font-family: avril, 'andere Schriftart' sans-serif;
}

#benjamin, #willgruber {
	font-size: 7vh;
        color: #ffffff;
}

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

• Die Anführungszeichen um den Schriftartnamen brauchst du nur, wenn der Name Leerzeichen enthält.

TIL: Auch dann nicht. (Wobei T hier für the other day steht. ;-))

Ich würde sie aber – wie dort gesagt – trotzdem setzen.

LLAP 🖖

[stefan]

[Vollzitat]

DIE LÖSUNG DES GANZEN ÜBELS: line-height musste definiert, werden somit passt es jetzt auf den anderen auch.

[Rest vom Vollzitat]

[Stefan]

Hi danke fuer die antworten.

Vh waehlte ich deswegen weil es sich eben an die hoehe des viewports anpassen sollte. Und es funktioniert bei 90 prozent der faelle genau richtig. Ich habe es mit em und rem probiert. Und da habe ich das problem das ich es fuer fast jede aufloesung, es umschreiben muss damit es passt. Bei einer aufloesung von 1900x760 wird die schrift ganz klein, im gegensatz zu vh passt sie genau. Und das ist irgendwie unmoeglich fuere jede aufloesung es zu schreibe. Auch mit oprozent hab ich es gemacht. Funktioniert auch nicht wirklich.

Das einbinden der schrift, ich weiss gehoert in die css datei, leider funktioniert es dort nicht. Eben nur in der php datei. Aber das ist auch icht so wichtig momentan.

Ich haette nur gerne eine loesung, egal bei welcher auffloesung, das die schrift die richtige groesse hat. Dass eben bei hoher aufloesung die schrift nicht zu klein wird und bei kleiner aufloesung nicht zu gross.

Biitte um hilfe, ich verzweifel echt schon langsam.

Noch dazu gibt es eine moeglichkeit die seite fuer andere handys zu testen?

[Gunnar Bittersmann]

@@Stefan

Vh waehlte ich deswegen weil es sich eben an die hoehe des viewports anpassen sollte. Und es funktioniert bei 90 prozent der faelle genau richtig.

Auch, wenn man das Gerät ins Querformat dreht? Oder werden dann aus den 90% nur noch 45%?

Wenn du die Schriftgröße schon an der Viewportgröße festmachen willst, wäre vielleicht die Einheit vmax sinnvoller.

Das einbinden der schrift, ich weiss gehoert in die css datei, leider funktioniert es dort nicht. Eben nur in der php datei.

Das ist Unsinn. Natürlich funktioniert die Angabe der Schrift im Stylesheet. Es sei denn, du machst dabei etwas falsch.

Aber das ist auch icht so wichtig momentan.

Doch, ist es.

Ich haette nur gerne eine loesung

Hast du schon mal versucht, die Zeilenhöhe anzugeben? line-height: 1 könnte für deine Zwecke richtig sein.

LLAP 🖖

[stefan]

@@Stefan

Vh waehlte ich deswegen weil es sich eben an die hoehe des viewports anpassen sollte. Und es funktioniert bei 90 prozent der faelle genau richtig.

Auch, wenn man das Gerät ins Querformat dreht? Oder werden dann aus den 90% nur noch 45%?

Wenn du die Schriftgröße schon an der Viewportgröße festmachen willst, wäre vielleicht die Einheit vmax sinnvoller.

Das einbinden der schrift, ich weiss gehoert in die css datei, leider funktioniert es dort nicht. Eben nur in der php datei.

Das ist Unsinn. Natürlich funktioniert die Angabe der Schrift im Stylesheet. Es sei denn, du machst dabei etwas falsch.

Aber das ist auch icht so wichtig momentan.

Doch, ist es.

Ich haette nur gerne eine loesung

Hast du schon mal versucht, die Zeilenhöhe anzugeben? line-height: 1 könnte für deine Zwecke richtig sein.

LLAP 🖖

Ist diese Antwort anstößig? Dann könnte sie nützlich sein.

nein hatte ich noch nicht probiert mit line-height und ist mir auch neu. Bin mir sicher dass ich einen Fehler beim einbinden der Schriftart mache, nur weiß ich nicht welchen. aber den fehler werde ich schon noch finden.

Ja das mit Querformat ist mir klar, dass ich das extra implementieren muss.

hab es mit vmax ausprobiert. und es passiert genau das wenn das fenster kleiner wird von der breite dann verschiebt sich der text in das div. lediglich bei der höhe funktioniert es. da wird es richtig gesetzt. mit vh wird es in der breite und höhe richtig skaliert.

ich tu mich ncoh extrem schwer, von der jeweiligen Auflösung abstand zunehmen. dies versuchte ich vorher, ging natürlich in die hose und war mühsam. und jetzt versuche ich es eben so ziemlich richtig zu machen.