Einfache HTML-Website auf mobilen Geräten

[Auge]

Hallo

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.

Dafür gibt es mittlerweile auch Methoden, mit denen je nach Viewportgröße unterschiedliche Dateien geladen werden. Damit kann man unterschiedlich große Bilder laden lassen. Allerdings ist dazu zu sagen, dass es mehrere konkurrierende Methoden gibt ^[1], die natürlich eine unterschiedliche Unterstützung durch die Browser erfahren ^[2].

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.

Schön.

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 :).

<spekulation>Ist das Display und damit der Browserviewport dort so groß, dass er die Desktopregeln befolgt?</spekulation>

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?

Du könntest die Breiten und die Ränder mit calc berechnen lassen. Gehe aber davon aus, dass du bei deinen Wunschwerten (25%, 50%, 25%) Nebenwirkungen haben wirst, die du bisher noch nicht erahnt hast und die du auch nicht beheben müssen willst.

Tschö, Auge

PS: Auch wenn's in Wiederholung nervt, lösche die Teile des zu beantwortenden Vorpostings, auf die du dich nicht beziehen willst.

---

1. Ein paar Links: responsiveimages.org, Alistapart, Using Responsive Images (Now) ↩︎

2. Can I Use? ist ein empfehlenswertes Werkzeug zur Ermittlung der Unterstützung von features in Browsern. Einfach den Namen des Features in den Suchschlitz eingeben oder selbiges in der Liste suchen und Link aufrufen, schon hast du die notwendigsten Infos. ↩︎