noch eine beobachtung zur ergänzung:
wenn man folgendes setzt:
<meta name="viewport" content="width=device-width, user-scalable=yes">
<style type="text/css" >
body {margin:0px;
padding:0px;
font-size:48px;
/*font-size:4.2mm;*/ /*entspricht der standardgröße von 16px, und wäre nur mit lupe lesbar...*/
line-height:1em;
}
.textclass01{font-size:1em}
img {margin:0px 360px 0px 360px;} /**/
</style>
dann ist ein bild mit 360 x 360 px genau so breit wie die beiden margins zu 360 px, nämlich ca. 21 mm; die 3 'spalten' füllen dann exakt die screenbreite von 1.080 physischen pixeln aus (während die screen-breite, die die media-query ergibt, 360 px ist...); ebenso ein bild mit 1.080 px breite (nun nicht mehr scrollbar; s. body-styling). die schrift mit einer größe von 1 em ist bei einer basis-größe von 48 px angenehm lesbar (ca. 2,5 mm hoch [nicht lang, werter matthias...]); 36 px gehen auch noch...
mit diesen (bzw. ähnlichen) rahmenbedingungen ist also in der praxis ein graphisch optimales lay-out für moderne smart-phones zu erstellen...
BTG