Einfache HTML-Website auf mobilen Geräten

Hallo liebes Forum,

unten der Code meiner sehr einfachen Website (alt, 1 HTML-Seite…). Ich will, dass sie einigermaßen auf mobilen Geräten ok erscheint. Hauptfrage ist: Wieso wird die Seite bezgl. des Rands auf dem gleichen Gerät (Android-Tablet) und versch. Browsern ganz unterschiedlich ausgelegt? Der Rand ist ja auf automatisch ausgelegt. Bei Chrome auf Android (und übrigens auch auf dem iPad) erscheint der Rand RIESIG, Firefox und Android-Browser lassen den Rand einfach weg und die Seite sieht wunderbar aus. Kann ich also irgendwie erreichen, dass der Rand bei mobilen Geräten einfach weggelassen wird?


TITEL @media only screen and (max-device-width:1024px) {body{font-size: 2.1em;}} @media only screen and (max-device-width:1024px) and (orientation : landscape) {body{font-size: 1.9em;}}
*TEXTE UND INHALTE*

DANKE!
Peter

Du schreibst in HTML4, was heutzutage schon sehr altbacken ist. Versuch doch gleich in HTML5 zu schreiben, das macht es auch für die Zukunft leichter.

Außerdem solltest Du allen CSS-Code auslagern, das macht auch die Bearbeitung einfacher und übersichtlicher.

Weiterhin solltest Du dich über Responsive Design informieren, damit kann man alle Probleme hinsichtlich der Ansichten auf verschiedenen Displays lösen. Aktuell hast Du z.B. fest 800 Pixel breite festgelegt für den Inhaltsbereich, aber nicht jedes Display hat auch so viele Pixel zur Verfügung. Hier musst Du dich über media queries für eine flexible Darstellung entscheiden.

Hallo threadi,

danke für deine Tipps. Wie gesagt ist das eine ganz einfache Seite, nur eine einzige HTML-Datei ohne Untermenü etc. „Leider“ habe ich damit aber ein exzellentes Ranking bei Google, was ich - und sei es nur aus Aberglaube - nicht riskieren will, indem ich ein Relaunch mache mit anderem Template. Daher habe ich es auf die Weise versucht, die man im Code sucht. Das klappt auch wunderbar, nur finde ich es eben seltsam, dass manche Browser und Geräte den Rand einfach weglassen (was ja prima ist), und andere extrem ausdehnen, so dass die Seite dann in der Mitte ganz klein ist. Natürlich ist das mit den 800px nicht optimal, aber für echte responsive Lösungen fehlt mir das Wissen und eben auch der Glaube ans gute Ranking „danach“.

Google bevorzugt für Suchanfragen von mobilen Geräten auch responsive erstellte Webseiten. Deine Webseite wird vermutlich bei Desktop-Suchen gut gefunden werden, warum auch immer. Aber bei Mobilgeräten wirst Du damit nicht punkten könnten. Hier musst Du dich mit responsivem Design auseinandersetzen.

Hallo nochmal,

doch, das ist ja das Verrückte. Dadurch, dass ich nur eine Seite habe und diese (siehe Code oben) auch an Mobilgeräte „anpasse“, komme ich durch den Google Mobile Test durch und habe sogar den Score 94 :-). Und wenn man mit dem Smartphone danach googelt, wird meine Seite sogar „für Mobilgeräte“ o.ä. bezeichnet. Es geht mir also wirklich nur darum zu verstehen, warum der Rand so unterschiedlich behandelt wird, oder ob man den Rand „mobiltauglich“ definieren kann.

https://forum.selfhtml.org/self/2016/jan/8/einfache-html-website-auf-mobilen-geraeten/1658422

Cool, danke für deine Recherche und den Link!

In diesem Posting geht es mir auch nicht mehr um die ersten Fragen, die ich ursprünglich hatte, sondern nur noch um die Rand-Problematik.

Das ist jetzt nicht dein Ernst, oder?

Naja, inzwischen hat sich 0.4 als bester Kompromiss erwiesen. Für meinen Zweck ist das ok so, oder was könnte das Problem dabei sein?