Einfache HTML-Website auf mobilen Geräten

[littbarski]

Hallo Auge,

danke für deine hilfreiche Antwort. Also ich bin ehrlichgesagt sehr froh, dass ich mich heute endlich mal nach Jahren dafür entschieden habe, hier im Forum nicht nur zu lesen, sondern auch zu fragen. Ich dachte eben, dass mein Seitenaufbau dermaßen altbacken ist, dass ich mich kaum nach Tipps zu fragen traute.

Also: Mit dem CSS bin ich schonmal erleichtert (ja, ist 1 HTML-Seite mit 1 Haupt-DIV). Natürlich gebe ich zu, dass style auch nochmal im html vorkommt, aber ok, ich schau's mir an :). Mit dem HTML5 überlege ich mir das auch gerne nochmal.

Und nun wieder zum Mobil-Thema: Wie man am DIV (unten in meinem Code-Zitat) sieht, habe ich also einen Inhaltsbereich mit fester Breite und variablen Seitenrändern. Auf breitem Monitor (wie heute üblich) sieht es m.E. besser aus, wenn die Texte nicht ganz von links nach rechts gehen, sondern eben ein Rand rechts und links des DIV besteht. Nun soll der Inhaltsbereich auf mobilen Geräten nicht im Original-Zoom dargestellt werden, sondern so klein, dass der ganze Inhalt (Breite) zu sehen ist. Die Ränder hingegen sind mir bei Mobilgeräten egal. Und bei fast allen Geräten klappt es auch, weil einfach der Rand weggelassen wird. Nur bei Chrome und bei iPad wird der Rand im Gegenteil riesig groß...Können Chrome und iPad viell. nicht mit den Randangaben umgehen?

Zoomen lasse ich übrigens zu (siehe Code) und die Schrift ist nicht klein, sondern größer (siehe @media).

Hallo

Bezüglich CSS und HTML5 muss ich gestehen, dass ich keine externe CSS-Datei habe und die Website noch vor HTML5 angelegt wurde (und ich wie erwähnt HTML-mäßig wenig weiß). Daher dachte ich, dass ich das nicht einfach "pro forma" zu HTML5 deklarieren darf, wenn ich es nicht in dieser Hinsicht alles angelegt habe.

Es gibt in der freien Wildbahn wohl kaum noch Browser, die mit HTML5 nicht umgehen können. Zudem benutzt du ja momentan keine erst mit HTML5 eingeführten Elemente, sondern nur den Doctype. Das ist ungefährlich.

Solange du nur dein eines HTML-Dokument hast – wie ich es hoffentlich korrekt aus deinem Eröffnungsposting herauslas –, ist es kein Problem, deine CSS-Regeln im Dokumentkopf zu notieren. Das solltest du dann aber auch konsequent umsetzen und nicht noch zusätzliche Style-Angaben in den einzelnen HTML-Elementen verteilen.

• Zoom: tja, leider kein Tippfehler :). Ich will eben, dass keinerlei Zoom stattfindet, sondern auch auf kleinen Geräten immer die ganze Seitenbreite erreicht wird.

Was ist für dich „die ganze Seitenbreite“? Für mich wäre das der Bereich mit dem tatsächlichenh Inhalt.

Ist das nicht so in die richtige Richtung gesdacht? Bei scale 1.0 ist die Seite viel zu breit auf mobilen Geräten.

Ragt sie seitlich über die Breite des Viewports hinaus? Wenn der Inhalt genau in die Viewport-Breite passen sollte (mit ein paar Pixel Luft zum Rand), stimmt die Breite. Warum sollte auf einem solch kleinen Display überhaupt Platz an einen nutzlosen Rand verschwendet werden? Als Nutzer muss ich dann entweder zoomen – wenn ich denn kann, weil der Anbieter mich lässt – oder mich mit unnötig klein dargestelltem Inhalt rumärgern. …

… Oder auch nicht, dann bin ich aber auch von der Seite weg. Und zwar für immer.

Tschö, Auge