Hallo Website-Entwickler,
basierend auf der Responsive-Version des einspaltigen Layouts von den DVDs baue ich gerade meine Homepage neu auf.
Dabei bin ich auf folgendes Phänomen bei mobile-devices gestoßen:
Ändert sich das Bildschirmformat, z.B. durch kippen des Displays, von Hoch- zu Querformat, Behalten Überschriften (h1, h2, h3, ...) optisch ihre Schriftgröße bei. Aber Absätze im article-Tag werden größer, obwohl die Schriftgrößen für alles via CSS3 fest in Pixeln vorgegeben sind.
Das macht natürlich die Optik der gesammten Seite kaputt, wenn normaler Text plötzlich so groß wie Überschriften, oder sogar noch größer ist.
Was muss getan werden, um das zu vermeiden?
Folgend die relevanten Auszüge aus den Dateien:
...
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">
...
<article class="tabellen_zelle maximale_hoehe">
<div>
<h1>Herzlich Willkommen auf meiner Internetseite</h1>
<p>Momentan wird diese Internetseite von mir mit HTML5 und CSS3, in Responsive-Design und gemäß der Vorgaben der W3C, neu aufgebaut.</p>
...
</div>
</article>
Alles anzeigen
...
* {
margin: 0;
padding: 0;
}
html, body {
font-family: arial, sans-serif;
height: 100%;
}
body {
display: table;
width: 100%;
}
...
article div {
margin: 20px 40px;
font-size: 14px;
}
article h1,
article h2 {
margin-bottom: 0.4em;
}
article h1 {
font-size: 22px;
}
article h2 {
font-size: 18px;
}
article h3 {
font-size: 16px;
}
article p,
article ul {
margin-bottom: 1em;
line-height: 1.5em;
}
...
.tabellen_zelle {
display: table-row;
}
.maximale_hoehe {
height: 100%;
}
Alles anzeigen
An dieser Stelle schonmal Danke für die Hilfe.