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>