• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Anfänger Fragen zum Responsive Webdesign

J

joergi

Mitglied
Hi,

ich versuche gerade, meine Seiten für die Darstellung auf einem mobilen Gerät zu optimieren. Aber was auf dem PC einwandfrei dargestellt wird, verursacht auf einem mobilen Gerät Darstellungsprobleme.

Ein Beispiel: Wenn ich den nachfolgenden Code auf einem PC darstelle, wird der Text in derselben Größe forlaufend angezeigt. Wenn ich den Code auf meinem Smartphone (Samsung Galaxy S7) darstelle, wird der Text ebenfalls in der richtigen Größe dargestellt. Wenn ich nun einen weiteren Text "Das ist ein Test." angebe, wird der Text jedoch stark gezoomt.

Gibt es eine Möglichkeit, dies zu verhindern? Oder gibt es eine andere Möglichkeit?

Danke im voraus für Eure Hilfe :smile:


HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<style type="text/css">
.table
{
display:table;
border-collapse:collapse;
width:100%
}
.tr
{
display:table-row;
}
html, body {margin:0; padding:0; height:100%;}
</style>
<div class="table">
<div class="tr">
<div style="width:500px; font-size:30px;">
Das ist ein Test. Das ist ein Test. Das ist ein Test.
Das ist ein Test. Das ist ein Test. Das ist ein Test.
Das ist ein Test.
</div>
</div>
</div>
 
Das sieht alles ziemlich seltsam aus... aus welchem 'Buch' hast du dir das angelesen?
Der !DOCTYPE zeichnet das Dokument als HTML 4.01 STRICT aus - das ist schon lange nicht mehr aktuell! Wenn du damit anfängst, nutze am besten gleich das aktuelle HTML 5... also
HTML: 
<!DOCTYPE html>
Dann verzichtest du im Dokument komplett auf die Strukturelemente (<html>, <head>, <body>). Habe zwar auch irgendwo gelesen, dass das durchaus legitim sein soll, aber es führt doch zu einigen Problemen und selbst der Validator von W3.org spuckt das als Fehler aus. Das Grundgerüst eines HTML Dokumentes sollte/muss also immer so aussehen:
HTML: 
<!DOCTYPE html>
<html>
   <head>
      <!-- Hier die Head-Angaben -->
   </head>

   <body>
      <!-- Hier der HTML Code des Dokumentes -->
   </body>

</html>
Desweiteren fehlen dir die 'Pflichtangaben' im 'head' für den 'Titel' und den 'Charset' - und für dein Problem vielleicht der entscheidende Fehler - die Angaben zum 'Viewport', mit dem einige Anzeigeprobleme bei mobilen Endgeräten vermieden werden können.
Nach meiner Meinung sollte dein Code so aussehen...
HTML: 
<!DOCTYPE html>
<html lang="de">

<head>
<title>Das ist ein Test</title>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<style>
   .table {
      display:table;
      border-collapse:collapse;
      width:100%
   }
   .tr {
      display:table-row;
   }
   html,
   body {
      margin:0; padding:0; height:100%;
   }
</style>
</head>

<body>
   <div class="table">
      <div class="tr">
         <div style="width:500px; font-size:30px;">
            Das ist ein Test. Das ist ein Test. Das ist ein Test.
            Das ist ein Test. Das ist ein Test. Das ist ein Test.
            Das ist ein Test.
         </div>
      </div>
   </div>
</body>

</html>
Bitte mal testen und wenn du weitere Hilfe brauchst, einfach wieder hier nachfragen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben