Einfache HTML-Website auf mobilen Geräten

[littbarski]

Im nächsten Schritt entsorgen wir das überflüssige div und geben Breiten in em, nicht in px an: MKmVBg

Das sollte weiterhelfen.

Ja, und wie! :-) Ich habe die letzten Tage ziemlich viel Zeit in meine Seite investiert und konnte wirklich sehr von deinen Tipps, Gunnar (und auch denen der anderen) profitieren. Insbesondere die Änderung an meinem Code-Beispiel (s.o.) konnte ich gut nachvollziehen. Ich bin eben wirklich Anfänger und weiß eigentlich nicht einmal so genau, was das alles für Tags sind...jetzt sieht alles auf allen mobilen Geräten toll aus und der Google Mobile Score ist 99 :).

Nun habe ich in der Tat das Haupt-DIV einfach entfernt und alle zu breiten Elemente mit einer max-width versehen (und auch viele "Design"-Tabellen entfernt). Nun ist es in der Tat so, dass man den viewport scale auf 1 lassen kann und auch die Schriftvergrößerung nicht mehr wirklich braucht.

Also an alle Laien-Mitleser: Man kann eine Easy-1-HTML-Seite ohne Flash, Menü, @media oder JS auch so einstellen, dass es auf allen mobilen Geräten gut aussieht (der Inhaltsbereich wird nämlich dann einfach zusammengeschoben).

Gunnar, eine letzte Frage hätte ich noch zu der max-width: 50em; des body. Was ist der Vorteil gegenüber einer px Angabe dafür? Und muss man etwas speziell dabei beachten? Ich vermute, es hängt also von der Schrift ab. Meine Schrifteinstellungen sind so:

h1 {
font-weight: normal;
font-style: normal;
text-transform: none;
font-size: 1.5em;
font-family: Calibri,Geneva,'Trebuchet MS',Helvetica,Arial,sans-serif;
}
h2 {
font-weight: normal;
font-style: normal;
text-transform: none;
font-size: 1.25em;
font-family: Calibri,Geneva,'Trebuchet MS',Helvetica,Arial,sans-serif;
}
h3 {
font-weight: normal;
font-style: normal;
text-transform: none;
font-size: 1em;
font-family: Calibri,Geneva,'Trebuchet MS',Helvetica,Arial,sans-serif;
}
html
{
  color: rgb(0, 0, 0);
  background-color: rgb(238, 238, 238);
  padding: 0.5em;
}
body
{ 
margin: auto;
padding: 50px;
font-family: Calibri, Geneva, 'Trebuchet MS', Helvetica, Arial, sans-serif;
background-color: rgb(255, 255, 255);
max-width: 55em;
font-weight: normal;
font-size: 100%;
font-style: normal;
text-transform: none;
text-align: left;

Und da sehe ich doch noch eine Frage :) - du schreibst, dass das hier bei HTML5 nicht mehr nötig ist, wie heißt der Tag dann korrekt? <style type="text/css">