Website auf iPhone verschoben dargestellt??

ilonantonia schrieb am 20.09.2013 um 03:40 Uhr

Hallo zusammen...

ich habe im  Designer Pro X 9 eine Website erstellt und veröffentlicht..  soweit alles fein. Auf meinem Samung X 4 stellt sich die Seite wunderbar dar. Aber auf dem iPhone meiner Freundin erscheint alles verschoben und die Buchstaben übereinander... woran kann das nur liegen?

Sollte ich generell für Smartphones eine neue Website erstellen? Das fände ich sehr unpraktisch bezgl. updates und Änderungen... Hoffe da gibt es eine geschmeidige Lösung.

Vielen Dank schon mal im Vorraus.

...hier übrigens die Seite www.cafe-glueck-fulda.de 

ilona :-)

Kommentare

BeRo schrieb am 20.09.2013 um 12:07 Uhr

[...] Sollte ich generell für Smartphones eine neue Website erstellen? [...]

Das ist prinzipiell die beste Methode

Wenn Du dazu noch eine Browserweiche benutzt, hast Du schon fast eine perfekte Lösung.

[...] Hoffe da gibt es eine geschmeidige Lösung. [...]

Die gibt es auch

Wenn Du z. B. im Viewport Tag den "width" Parameter änderst, kannst Du die üblichen Browser der mobilen Geräte veranlassen, die Seite einzupassen.

Dazu musst Du allerdings manuell Änderungen an den Seiten vornehmen. Das geht so:

  • Öffne die HTML Seiten mit einem einfachen Texteditor
  • Ändere den "width" Parameter im Viewport Tag ab, auf die Breite der Seite in Pixeln
    In Deinem Fall also auf 955


     
  • Speichere die geänderte(n) Seite(n)
  • Lade die geänderten HTML Seiten manuell hoch, auf Deinen Webspace

Wenn alles geklappt hat, sollte Deine Seite auf einem iPhone so zu sehen sein:


Eine Kopie Deiner Site, mit dem entsprechend modifizierten Viewport Parameter, habe ich hier zum Test online gestellt.

Probier's einfach mal mit dem iPhone Deiner Freundin aus...

Die Lösung ist allerdings nicht universell. Es ist leider nicht sichergestellt, dass alle mobilen Browser den Viewport Tag "richtig" erkennen, da er bisher nicht in einschlägigen Regeln verankert wurde.

Dennoch gerne Viel Erfolg

Zuletzt geändert von BeRo am 20.09.2013, 12:07, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

marboe schrieb am 22.09.2013 um 12:26 Uhr

Die Lösung ist allerdings nicht universell. Es ist leider nicht sichergestellt, dass alle mobilen Browser den Viewport Tag "richtig" erkennen, da er bisher nicht in einschlägigen Regeln verankert wurde.

Hallo, das muss ich leider bestätigen. Wenn ich mir die modifizierte Website von Bero mit Opera Mini auf Android anschaue, dann klappt das mit dem bildschirmfüllend leider nicht.

Was ich mit meinem älteren Handy leider auch sehe, sind die verschobenen Textzeichen. War da mal nicht was mit der Einstellung "Blocksatz"? Will heißen, wenn man links oder rechtsbündig einstellt, dann kommt es nicht zu den Überschneidungen? Hier ist der alte entsprechende Thread.

Dann wäre doch der Schluss, dass eine Änderung des Viewport zwar eine bessere Darstellung der gesamten Website im Focus für mobile Geräte bringen kann, aber damit nicht unbedingt das Textüberlappungsproblem beim Blocksatz gelöst ist? Ich habe auf meinen Seiten den Text auf linksbündig geändert und seitdem keine Probleme mit Smartphones mehr. (außer dem Bildschirmausschnitt - was mich aber nicht stört)  Gruß Martina

BeRo schrieb am 22.09.2013 um 13:07 Uhr

@ marboe

[...] Ich habe auf meinen Seiten den Text auf linksbündig geändert und seitdem keine Probleme mit Smartphones mehr. [...]

Du hast recht, die linksbündige Ausrichtung ist die beste Methode, wenn durchgängig eine möglichst gleichartige Textdarstellung mit den gängigen Browsern erreicht werden solll.

Das grundsätzliche Problem, das ilonantonia mit Ihrer Website hat, kann so aber nicht behoben werden. Die Textdarstellung wird zwar besser, die zerstückelte Darstellung der einzelnen Frameinhalte ändert sich aber nicht, wie auf dem Screenshot zu sehen ist (Opera Mini Browser).


Die online Demo habe ich gerade entsprechend angepasst.

Ich hatte noch keine Gelegenheit, zu testen, ob die hier gezeigte Website in dem Zusammenhang eine Ausnahme darstellt. Vielleicht lässt sich die Ursache ja auch noch herausfinden.

Wer mit suchen möchte, der kann sich hier gerne die Projektdatei herunterladen...

Ich wünsche Euch noch einen schönen Rest vom Sonntag

Zuletzt geändert von BeRo am 22.09.2013, 13:07, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

marboe schrieb am 22.09.2013 um 21:44 Uhr

@BeRo

in meinem Opera Mini ist alles wunderbar mit der Testseite. Nichts ist zerstückelt oder verschoben.

Es wird wirklich Zeit, dass da mal einheitliche Regeln geschaffen werden. Mit dem nächsten Handy ist es wahrscheinlich wieder anders .

@Ilona

hat das Anpassen des Viewport denn jetzt für eine gute Anzeige im Iphone geführt?

Gruß Martina

ilonantonia schrieb am 22.09.2013 um 21:58 Uhr

Hallo ihr beiden... herzlichen Dank für eure Antworten. Ich hatte noch keine Gelegenheit sie umzusetzen, da wir mittem im Umbau stecken. Aber in Kürze wage ich mich ran und werde auf jeden Fall berichten!  ...bin sehr dankbar für eure Hilfe! ...solltet ihr mal in Fulda sein, würd ich mich gerne mit was Leckerem im Café Glück bedanken!

Liebe Grüße,

Ilona