nicht angemeldet
oxo888oxo
Matthias Apsel
oxo888oxo
Matthias Apsel
oxo888oxo
Matthias Apsel
oxo888oxo
Hallo
Ich bin grad dabei, eine neue Webseite zu erstellen.
Zu Beginn habe ich ein einfaches Grundgerüst erstellt.
Nun habe ich mir die Seite angeschaut auf:
* PC mit Firefox und IE
* Tablet (Nexus 7 mit Chrome Browser)
* Smartphone (Huawei mit Chrome Browser)
Merkwürdigerweise wird auf dem Smartphone die Schrift in der Navigation kleiner Dargestellt als die Schrift vom Rest der Seite.
Auf dem PC und dem Tablet ist das nicht so.
Woran kann das denn liegen?
Hier mal der HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/css-x.css" media="screen">
<title>Zweispaltiges Layout mit fester Breite</title>
</head>
<body>
<div id="Seite">
<ul id="Navigation">
<li><a href="navi-1.php">Navigation Rubrik 1</a></li>
<li><a href="navi-2.php">Navigation Rubrik 2</a></li>
<li><a href="navi-3.php">Navigation Rubrik 3</a></li>
<li><a href="navi-4.php">Navigation Rubrik 4</a></li>
<li><a href="navi-5.php">Navigation Rubrik 5</a></li>
<li><a href="navi-6.php">Navigation Rubrik 6</a></li>
<li><a href="navi-7.php">Navigation Rubrik 7</a></li>
<li><a href="navi-8.php">Navigation Rubrik 8</a></li>
<li><a href="navi-9.php">Navigation Rubrik 9</a></li>
<li><a href="navi-10.php">Navigation Rubrik 10</a></li>
<li><a href="navi-11.php">Navigation Rubrik 11</a></li>
<li><a href="navi-12.php">Navigation Rubrik 12</a></li>
<li><a href="navi-13.php">Navigation Rubrik 13</a></li>
</ul>
<div id="Inhalt">
<h1>Navigation Rubrik 1</h1>
<img src="/bilder/error401.jpg" alt="bild">
<h2>Dies ist eine tolle Überschrift</h2>
<p>Das hier ist nun der tolle Text zu der obigen Überschrift. Ist doch wirklich eine echt feine Sache. Das hier ist nun der tolle Text zu der obigen Überschrift. Ist doch wirklich eine echt feine Sache. Das hier ist nun der tolle Text zu der obigen Überschrift. Ist doch wirklich eine echt feine Sache. Das hier ist nun der tolle Text zu der obigen Überschrift. Ist doch wirklich eine echt feine Sache. Das hier ist nun der tolle Text zu der obigen Überschrift. Ist doch wirklich eine echt feine Sache.</p>
<h2>Dies ist eine tolle Überschrift</h2>
<p>Das hier ist nun der tolle Text zu der obigen Überschrift. Ist doch wirklich eine echt feine Sache. Das hier ist nun der tolle Text zu der obigen Überschrift. Ist doch wirklich eine echt feine Sache. Das hier ist nun der tolle Text zu der obigen Überschrift. Ist doch wirklich eine echt feine Sache. Das hier ist nun der tolle Text zu der obigen Überschrift. Ist doch wirklich eine echt feine Sache. Das hier ist nun der tolle Text zu der obigen Überschrift. Ist doch wirklich eine echt feine Sache.</p>
</div>
</div>
</body>
</html>
Und hier der dazugehörige CSS Code:
html { /* erzwingt Scrollbar im Firefox */
height: 101%;
}
body {
color: black;
background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
text-align: center; /* Zentrierung im Internet Explorer */
}
div#Seite {
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
width: 720px;
border: 1px dashed silver;
}
ul#Navigation {
float: left;
width: 200px;
border: 1px solid #313131;
margin-top: 0;
padding-left: 0;
}
ul#Navigation li {
list-style: none;
border: 1px solid #313131;
}
ul#Navigation a {
text-decoration: none;
}
div#Inhalt {
margin-left: 200px;
border: 1px solid #313131;
}
div#Inhalt h1 {
margin-top: 0;
border: 1px solid #313131;
width: 510px;
}
div#Inhalt h2 {
border: 1px solid #313131;
width: 510px;
}
div#Inhalt p {
border: 1px solid #313131;
width: 510px;
}
div#Inhalt img {
border: 1px solid #313131;
}
Hier noch ein Screenshot vom Tablet:
Hier noch ein Screenshot vom Smartphone:
Gruß
Ingo
Om nah hoo pez nyeetz, oxo888oxo!
[code lang=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
HTML5 darfs schon sein.
„meta viewport“ heißen deine Suchbegriffe.
Matthias
Hallo Matthias
HTML5 darfs schon sein.
Reicht auch ein einfaches:
<!DOCTYPE HTML>
Hier wird das ja so beschrieben:
http://wiki.selfhtml.org/wiki/HTML/Tutorial/Kapitel2
„meta viewport“ heißen deine Suchbegriffe.
Ich glaube fast, wir haben uns da missverstanden.
Mein Problem war nicht die Tatsache, dass auf dem Smartphone-Screenshot nur ein herangezoomter Ausschnitt zu sehen ist. Das hatte ich extra so gemacht, damit man erkennen kann, dass beim Smartphone die Schriftgrößen für die Navigation und des Text rechts unterschiedlich groß sind.
Und das ist eben das, was ich nicht verstehe.
Eigentlich müsste die Schrift doch an beiden Stellen gleich groß sein.
Gruß
Ingo
Om nah hoo pez nyeetz, oxo888oxo!
Reicht auch ein einfaches:
<!DOCTYPE HTML>
Ja, das ist die richtige Angabe um ein HTML5-Dokument anzukündigen.
„meta viewport“ heißen deine Suchbegriffe.
Ich glaube fast, wir haben uns da missverstanden.
Mein Problem war nicht die Tatsache, dass auf dem Smartphone-Screenshot nur ein herangezoomter Ausschnitt zu sehen ist. Das hatte ich extra so gemacht, damit man erkennen kann, dass beim Smartphone die Schriftgrößen für die Navigation und des Text rechts unterschiedlich groß sind.
Und das ist eben das, was ich nicht verstehe.
Eigentlich müsste die Schrift doch an beiden Stellen gleich groß sein.
„meta viewport“ heißen deine Suchbegriffe.
Matthias
Moin Matthias
<!DOCTYPE HTML>
Ja, das ist die richtige Angabe um ein HTML5-Dokument anzukündigen.
OK alles klar.
Danke für den Hinwies.
„meta viewport“ heißen deine Suchbegriffe.
Irgendwie verstehe ich das leider noch nicht.
Wenn ich nach „meta viewport“ google, geht es doch immer um die Darstellung der Seitenbreite auf mobilen Geräten usw. Das Thema habe ich natürlich auch schon auf meinem Zettel.
Aber was ich nicht verstehe, was das mit meinem Problem der Schriftgrößen zu tun hat.
Kannst Du mir da noch einen Tipp geben, damit bei mir der Groschen fällt?
Gruß
Ingo
Om nah hoo pez nyeetz, oxo888oxo!
„meta viewport“ heißen deine Suchbegriffe.
Wenn mobile Browser keine viewport-Angabe finden, denken sie sich unterschiedliche Schriftgrößen aus.
<meta name="viewport" content="width=device-width, initial-scale=1">
sollte dein Problem der unterschiedlichen Schriftgrößen lösen. Die konkrete Angabe von 1em für ziemlich viele Elemente wird wahrscheinlich nicht zielführend sein.
Matthias
Om nah hoo pez nyeetz, oxo888oxo!
„meta viewport“ heißen deine Suchbegriffe.
[...] denken sie sich unterschiedliche Schriftgrößen aus.
Ich sehs grad vor mir:
Firefox zu Chrome "Ey, was fuerne Schriftgroesse nimmst n Du heute?"
Chrome: "Ich dachte mir 5 pt waere witzig. Mein User sieht immer so lustig aus, wenn er was nicht entziffern kann."
Firefox: "Dann nehm ich mal 40pt. Das treibt ihn sicher in den Wahn."
beide unisono: "MUHAHAHAHAHA"
Matthias
Wenn mobile Browser keine viewport-Angabe finden, denken sie sich unterschiedliche Schriftgrößen aus.
Ahhhh, nun wird's mir klar.
Danke!
Gruß
Ingo
Hallo,
du hast den einzelnen Elementen keine Schriftgröße mit auf den Weg gegeben, sondern nur eine grundsätzliche Schriftgröße definiert.
Deshalb greifen die Browser auf die in ihnen hinterlegten Schriftgrößen zurück. Und die sind keineswegs für alle Elemente gleich. Wenn unterschiedliche Elemente (z. B. p, li und andere) die gleiche Schriftgröße haben sollen musst du das den Browsern mitteilen.
Nebenbei: die Angabe mit 100,01% ist heutzutage nicht mehr notwendig. Die Browser, die diese Angabe benötigten, sind fast vollständig nicht mehr im Gebrauch. Der letzte war meiner Kenntnis nach der IE6.
Gruss
MrMurphy
Hallo MrMurphy
du hast den einzelnen Elementen keine Schriftgröße mit auf den Weg gegeben, sondern nur eine grundsätzliche Schriftgröße definiert. [...]
Ah OK, ich verstehe, das leuchtet natürlich ein.
Ich habe nun dem p, li und a Element allen eine Schriftgröße von 1em gegeben.
Und die Angabe mit 100,01% habe ich entfernt.
Aber leider ist die Schrift der Navigation auf dem Smartphone immer noch kleiner als die andere Schrift:
Was mache ich da noch falsch?
Gruß
Ingo