Einfache HTML-Website auf mobilen Geräten von littbarski, 08.01.2016 11:15

Einfache HTML-Website auf mobilen Geräten

littbarski 08.01.2016 11:15 (Versionen)

html
mobile

Hallo liebes Forum,

ich habe vor einigen Jahren eine Website erstellt, die nur ganz einfach aus 1 HTML-Seite besteht - ohne Menü, Unterseiten, Flash oder Verschachtelungen (1 zentr. div mit Rand links und rechts). Das eignet sich natürlich zunächst einmal ganz gut, um diese Seite auch auf mobilen Geräten anzuzeigen (nicht "echt" responsive, sondern eben aufgrund der Einfachheit). Alle möglichen Emulatoren zeigen die Seite ok an und auch den Google Mobile Test hat sie bestanden. Nun habe ich bei einem Freund gesehen, dass sie auf dem iPad leider extrem schmal angezeigt wird (1/3 der Breite). Die Ränder sind also riesig. Das Gleiche sehe ich auf meinem Android-Tablet im Chrome-Browser. Alle anderen Browser und mir bekannten Tablets und Smartphones (inkl. Apple und Android) gehen gut. Nun berfürchte ich aber natürlich, dass es noch mehr Probleme geben könnte. Daher kopiere ich hier mal meinen (für die Lesbarkeit gekürzten) Code rein, damit ihr seht, wie ich das (als absoluter HTML-Laie) mir das aus Tutorials zusammenkopiert habe. Ich bitte nur um Tipps zum bestehenden Code, da ich keinen größeren Relaunch möchte (Google-Ranking ist perfekt).

Meine Fragen also:

Ich möchte, dass nicht herangezoomt wird auf mobilen Geräte, sondern die Seitenbreite des DIVs angezeigt wird, ist das mit dem Viewport so ok ?
Wenn es ein mobiles Gerät ist, soll die Schrift größer sein, daher die @media Einträge. Kann man das so machen, oder Holzweg ?
Kann man im Code irgendwie sehen, warum auf manchen Geräten dann der Rand rechts und links so riesig ist?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html style="direction: ltr;" lang="de">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>TITEL</title>
<meta name="author" content="AUTOR">
<meta name="description" content="BESCHREIBUNG">
<meta name="keywords" content="KEYWORDS">

<meta content="width=device-width, initial-scale=0.1" name="viewport">

@media only screen and (max-device-width:1024px) {body{font-size: 2.2em;}}

@media only screen and (max-device-width:1024px) and (orientation : landscape) {body{font-size: 1.8em;}}

</head>
<body style="color: rgb(0, 0, 0); background-color: rgb(238, 238, 238); direction: ltr;">
<div style="margin: 0pt auto; padding: 50px; font-family: Calibri,Geneva,'Trebuchet MS',Helvetica,Arial,sans-serif; background-color: rgb(255, 255, 255); width: 800px; text-align: left;">
*TEXTE UND INHALTE*
</div>
</body></html>