Meistens sind ein oder mehrere Objekte auf der Seite breiter als ein Handybildschirm, wodurch die ganze Seite zu breit wird. Stellen Sie diese Objekte auf Volle Breite mit einer Max. Breite, dann werden sie passend verkleinert. Ein Computerbildschirm ist breit genug, um das Problem zu verbergen. Deshalb sieht die Seite dort gut aus.
1. Prüfen Sie, welche Art von Seite Sie haben
Wählen Sie die Seite in Ihrer Seitenliste aus und gehen Sie dann zu Inspektor > Seiteneinstellungen > Seitenlayout.
| Dort steht | Was das bedeutet | Weiter mit |
|---|---|---|
| Responsiv | Eine Seite, die sich an jeden Bildschirm anpasst | Schritte 2 bis 5 |
| Zentriertes Layout oder Linksbündiges Layout | Eine Seite mit fester Breite, die auf einem Handy ihre Desktop-Breite behält, es sei denn, Sie fügen eine eigene Seite für Handys hinzu (eine Mobilseite) | Schritte 2 und 6 |
Ändern Sie nicht das Seitenlayout, um das Problem zu beheben. Das kann Ihr Design grundlegend verändern, und die Änderung lässt sich nicht rückgängig machen.
2. Sehen Sie sich die Seite auf Ihrem Handy an
Ein Browserfenster auf Ihrem Computer entspricht nicht immer einem echten Handy. Verwenden Sie deshalb eine dieser Möglichkeiten:
- Ihre veröffentlichte Website: Öffnen Sie sie auf Ihrem Handy in einem privaten Fenster. Ein privates Fenster verwendet nicht die gespeicherte Kopie Ihres Browsers. Wenn die Seite dort richtig aussieht, ist mit Ihrer Website alles in Ordnung: siehe Ich habe veröffentlicht, aber meine Website zeigt noch die alte Version.
- Vor dem Veröffentlichen: Klicken Sie in der Symbolleiste auf Vorschau, wählen Sie Preview QR Code (QR-Code-Vorschau) und scannen Sie den Code mit der Kamera Ihres Handys.
Wenn die QR-Code-Vorschau nicht lädt:
- Verbinden Sie Handy und Computer mit demselben WLAN und schalten Sie jedes VPN und iCloud Private Relay aus.
- Wenn EverWeb meldet, dass der lokale Vorschau-Server nicht aktiviert ist, gehen Sie auf einem Mac zu EverWeb > Einstellungen > Allgemein oder unter Windows zu Bearbeiten > Optionen > Allgemein und setzen Sie ein Häkchen bei Vorschau-Server benutzen.
Notieren Sie sich, welche Objekte herausragen, und beheben Sie sie dann eines nach dem anderen.
3. Responsive Seiten: Jedes zu breite Objekt korrigieren
Hier sind Sie richtig, wenn sich die Seite seitlich verschieben lässt, an einer Seite einen weißen Streifen hat, abgeschnitten ist oder nach links gedrückt wird.
- Wählen Sie das Objekt aus. Wenn es auf jeder Seite erscheint, liegt es wahrscheinlich auf einer Master-Seite. Ändern Sie es dann dort.
- Gehen Sie zu Inspektor > Maße (das dritte Symbol).
- Setzen Sie unter Größe ein Häkchen bei Volle Breite.
- Geben Sie unter Max. Breite die größte Breite ein, die das Objekt auf einem großen Bildschirm haben soll, zum Beispiel seine aktuelle Breite. Das Feld bleibt ausgegraut, bis Volle Breite angehakt ist. Lassen Sie es bei 0, damit das Objekt die ganze Seite ausfüllt.
- Wenn unter Min. Breite eine Zahl steht, achten Sie darauf, dass sie kleiner als ein Handy ist. Handys sind etwa 375 Pixel breit. 0 bedeutet kein Minimum.
- Setzen Sie unter Ränder und Innenabstand große Ränder links oder rechts wieder auf 0 oder einen kleinen Wert. Ränder erhöhen die Breite.
- Wiederholen Sie das für jedes Objekt, das herausragt.
Zwei Ausnahmen:
- Das Objekt kann nicht auf Volle Breite gestellt werden. Manche Widgets haben immer eine feste Breite, zum Beispiel die Widgets Facebook Page Timeline und PayPal (Legacy). Legen Sie diese in einen Container mit etwa 280 bis 320 Pixeln Breite.
- Das Objekt lässt sich in einer responsiven Zeile nicht auf Volle Breite stellen oder bleibt zu breit. Klicken Sie mit der rechten Maustaste darauf (oder auf einem Mac bei gedrückter Ctrl-Taste), wählen Sie Aus responsiver Zeile entfernen und folgen Sie dann den Schritten oben.
4. Bilder: Verhindern, dass sie gestaucht aussehen oder Lücken lassen
Führen Sie zuerst Schritt 3 für das Bild aus, dann:
- Wählen Sie das Bild aus und gehen Sie zu Inspektor > Formoptionen (das zweite Symbol).
- Wählen Sie unter Füllung im Aufklappmenü für die Bildskalierung Skalieren zum Anpassen.
- Setzen Sie ein Häkchen bei Höhe autom. an Bild anpassen. Das entfernt auf einem Handy den leeren Raum über und unter dem Bild. Es funktioniert bei Bildern, die auf Volle Breite und Skalieren zum Anpassen eingestellt sind.
| Einstellung | Was Ihr Besucher sieht |
|---|---|
| Skalieren zum Anpassen | Das ganze Bild. Es kann leeren Raum lassen, außer Sie setzen ein Häkchen bei Höhe autom. an Bild anpassen |
| Skalieren zum Füllen | Das Bild füllt seinen Bereich aus, und die Ränder werden eventuell abgeschnitten |
| Strecken | Das Bild füllt seinen Bereich aus und kann auf einem Handy gestaucht aussehen |
Wenn ein Bild auf Ihrem Computer angezeigt wird, auf Ihrem Handy aber fehlt, stellen Sie es von Skalieren zum Füllen auf Skalieren zum Anpassen um.
5. Ein Abschnitt schiebt sich über einen anderen
Ein Container mit fester Höhe kann nicht wachsen, wenn sein Inhalt auf einem Handy mehr Platz braucht. Deshalb landet der nächste Abschnitt über ihm.
- Wählen Sie den Container aus. Wenn Sie immer wieder seinen Inhalt auswählen, klicken Sie mit der rechten Maustaste und verwenden Sie Ebene wählen.
- Gehen Sie zu Inspektor > Widget-Einstellungen (das Zahnrad, das letzte Symbol).
- Stellen Sie unter Größe die Höhe auf Auto.
- Setzen Sie Maximalhöhe auf 0, das bedeutet keine Begrenzung.
- Machen Sie dasselbe für alle Container darin.
Prüfen Sie außerdem, ob für das Objekt Freies Ziehen ermöglichen eingeschaltet ist (Inspektor > Maße, unter Position). Ein frei platziertes Objekt schiebt nichts anderes nach unten und kann deshalb auf einem Handy über anderen Inhalten liegen. Entfernen Sie das Häkchen, wenn das Objekt mit der Seite mitfließen soll.
6. Seiten mit Zentriertem Layout
Die ganze Seite ist auf einem Handy zu klein oder abgeschnitten. Dieser Seitentyp behält seine Desktop-Breite. Geben Sie ihm eine eigene Seite für Handys: siehe Meine Website sieht auf dem Handy falsch aus.
Text überlappt oder läuft auf einem Handy aus seinen Feldern heraus. Auf einem Handy kann Text mehr Zeilen brauchen, als Sie eingeplant haben, sodass er nicht mehr in sein Feld passt. Verwenden Sie Minimale Schriftgröße, damit der Text auf einem kleinen Bildschirm kleiner werden kann:
- Wählen Sie den Text aus.
- Öffnen Sie den Text-Inspektor und gehen Sie zum Bereich „Schrift“.
- Behalten Sie Ihre normale Größe im Feld Font Size (Schriftgröße). Geben Sie im Feld Minimale Schriftgröße die kleinste Größe ein, die Sie auf einem Handy möchten. Bei einer Schriftgröße von 24 könnten Sie zum Beispiel 18 eingeben.
- Gehen Sie zu Datei > Gesamte Site veröffentlichen.
Wenn Ihr ganzer Text in einem oder zwei großen Textfeldern steht, geben Sie außerdem jedem Absatz ein eigenes Textfeld. Lange Felder wachsen auf einem Handy und bringen andere Elemente durcheinander.
7. Prüfen Sie, ob es funktioniert hat
- Veröffentlichen Sie Ihre Website. Wenn Sie mehrere Seiten geändert haben, verwenden Sie Datei > Gesamte Site veröffentlichen. Siehe Was ist der Unterschied zwischen Veröffentlichen und Gesamte Site veröffentlichen?
- Öffnen Sie die Seite auf Ihrem Handy in einem privaten Fenster.
Wenn das Problem behoben ist, lässt sich die Seite nicht seitlich verschieben, nichts ist abgeschnitten, und nichts liegt über etwas anderem. Prüfen Sie auch Ihre anderen Seiten, da sie oft dieselben Einstellungen verwenden.
Wenn Sie immer noch die alte Seite sehen, siehe So leeren Sie den Browser-Cache.
8. Immer noch falsch? Senden Sie uns Ihre Projektdatei
Wir können Ihre veröffentlichte Website sehen, aber nicht Ihre Projektdatei (die bearbeitbare Kopie Ihrer Website, die auf Ihrem Computer gespeichert ist). Damit können wir genau das Objekt finden, das das Problem verursacht.
- Gehen Sie zu Datei > Projektefenster, um die Liste Ihrer Websites mit dem Titel Willkommen bei EverWeb zu öffnen.
- Klicken Sie neben Ihrem Projekt auf einem Mac auf die drei Punkte oder unter Windows auf den Pfeil nach unten.
- Wählen Sie Projektdatei an Support senden….
- Wenn das Hochladen abgeschlossen ist, gibt EverWeb Ihnen einen Link. Senden Sie uns diesen Link.
Wenn Ihr Projekt größer als 2GB ist oder das Hochladen nicht abgeschlossen wird, verwenden Sie stattdessen unsere Seite zum Hochladen von Projekten. Packen Sie unter Windows den ganzen Ordner mit Ihrem Projekt als ZIP-Datei, nicht nur die .ewwinproj-Datei.
Bitte teilen Sie uns außerdem mit:
- Den Namen der Seite und des Objekts, das falsch aussieht
- Ihre EverWeb-Version
- Ob Sie einen Mac oder Windows verwenden
Und senden Sie zwei Bildschirmfotos: eines von der Seite auf Ihrem Handy und eines vom ganzen EverWeb-Fenster mit dem ausgewählten Objekt.
Verwandte Artikel
- Meine Website sieht auf dem Handy falsch aus: So funktioniert die mobile Darstellung in EverWeb
- Warum landet das nicht dort, wo ich es hinziehe?
- Ich habe veröffentlicht, aber meine Website zeigt noch die alte Version
- Was ist der Unterschied zwischen Veröffentlichen und Gesamte Site veröffentlichen?
- So leeren Sie den Browser-Cache