Hallo Auge und herzlichen Dank für deine erneute Hilfe. Ja, das mit den 800px ist vermutlich der Übeltäter für die Scrollbalken. Ich kann schauen, ob ich das ändere, aber Bilder sind ja auch oft breiter als der schmale Viewport eines Smartphones, daher hab ich die Krücke des 0.1 Scale entdeckt, die ja auch fast überall klappt.
Ansonsten habe ich jetzt schon sehr viele Fragen beantwortet bekommen und ich kann meine Seite nun viel besser einschätzen und korrigieren, das freut mich sehr.
Bleibt für mich nur die Frage, warum ein iPad (und ein Chrome auf Android) diesen Code so interpretiert, dass der Rand extrem riesig sein muss :). Kann man denn den Rand so einstellen, dass er z.B. (jeweils rechts und links) max. halb so groß ist wie das DIV breit ist?
Doch, doch, wenn auch erst bei genauerem Hinschauen. Der Übeltäter heißt, wie bereits in einem anderen Posting geschrieben,
width: 800px;
.div style="margin: 0pt auto; padding: 50px; font-family: Calibri,Geneva,'Trebuchet MS',Helvetica,Arial,sans-serif; background-color: rgb(255, 255, 255); text-align: left;">
Ohne diese Angabe und mit
initial-scale=1
sieht die Beispielseite auch bei schmalem Viewport ordentlich aus. Wie das mit den originalen Inhalten aussieht, steht auf einem anderen Blatt. Da können weitere Anpassungen nötig sein.