oxo888oxo: Schriftgröße auf dem Smartphone Browser verhält sich anders

Beitrag lesen

SELF-Forum

Schriftgröße auf dem Smartphone Browser verhält sich anders

oxo888oxo
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln