Hallo Zeta Gemeinde,
ich erstelle gerade eine neue Homepage die mir aber Darstellungsprobleme im IPhone macht, die Darstellung im Android ist in Orndung. Die Textumbrüche funktionieren fehlerhaft und das Layout wirkt teilweise defekt. Macht es Sinn hier das Layout nochmal zu wechseln oder kann ich anderweitig etwas optimieren? Ich habe die automatische Silbentrennung eingefügt, wie sie hier in einem Forenbeitrag beschrieben ist.
Hallo Christine,
ohne Angabe der Zeta-Version und einen Link zur betroffenen Homepage ist da wenig zu machen. Auch solltest Du genauer beschreiben, was "defekt" und "fehlerhaft" ist.
Die betroffene Seite ist hier als Testseite veröffentlicht:
http://seti-its.com/kundenprojekte/plenz
Auf dem IPhone wird der Textumbruch auf den Seiten teilweise schlecht umgesetzt, ein einzelner Buchstabe ist in der nächsten Zeile. Die "News"-Box wird viel zu schmal dargestellt und die Telefonnummern hängen in den Inhaltsbereich rein - das ist beim Android aber auch so - gerade gesehen, war mir vorhin nicht aufgefallen. Was habe ich übersehen oder falsch umgesetzt?
Zeta Version ist 13.3
Hallo Christine,
auch unter Windows (bei Änderung der Größe des Browserfensters) kann man das Verhalten sehen. Ich habe parallel dazu als 2. Fenster mal unsere Vereinsseite genommen, die ebenfalls eine News-Spalte hat (aber Layout Simple Responsive).
Zum einen verwendest Du eine größere Schrift, was dazu führt, dass eher umgebrochen werden muss. Der einzelne Buchstabe in der nächsten Zeile wird durch die eingeschaltete Silbentrennung verursacht. Bei ausgeschalteter Silbentrennung erfolgt der Zeilenumbruch nur an Leerzeichen, nicht aber innerhalb eines Wortes. Bei der Mobil-Nr. hast Du nach dem ":" kein normales, sondern ein "geschütztes" Leerzeichen eingefügt, deshalb bleibt "Mobil" einzeilig, während "Tel." umgebrochen wird. Auf zweispaltige Artikel solltest Du verzichten, wenn zusätzlich auch noch der News-Bereich aktiv ist.
Hallo,
ich habe die Seite etwas verbesser können durch Testformatierung, aber ganz zufrieden bin ich noch nicht. Nun kam mir die Idee ob ich eine der folgenden Anpassungen am Layout selber machen kann:
- In der CSS anpassen, dass der Umbruch zur Darstellung im waagrechten Handydisplay früher geschieht und nicht erst wenn es quasi die senkrechte Breite hat. Die Newsbox verschwindet ja bei senkrechtem Handydisplay nach unten. Wie kann ich das beeinflussen?
- Kann ich im Layout irgendwo definieren, dass sich der Inhalt nicht dreht, wenn man das Handy dreht?
Danke und Grüße
Christine
Hallo,
Frage 1: ein Zeilenumbruch findet immer am Zeilenende statt. Das kann und muss man nicht beeinflussen. Die Breakpoints zur Umschaltung der mobilen Darstellung können (und müssen Sie in der Regel) nicht anpassen.
Frage 2: nein, das ist eine Funktion des Endgeräts, die vom Layout aus nicht beeinflusst werden kann, da würden sich manche User nämlich sehr wundern. Jedes iPhone hat aber z.B. im Controllcenter einen Schalter, der das drehen des Displays verhindert. Bin fast sicher, dass Android auch so eine Funktion hat.
Hallo und danke für die Antwort, ich habe gestern nochmal wegen der Darstellung und Auflösung recherchiert und bin da auf den Begriff "viewport" gestossen, hierüber wird ja einiges eingestellt, wie es dann der Browser interpretiert. Ich habe bei der Homepage das Problem, dass in der NewsBox die Emailadresse drin steht und diese bei zu schmaler Newsbox in den Text der Inhaltsbox reinragt. Wenn die Newsbox nun auch beim quer gedrehten Display unter die Inhaltsbox rutscht, wäre das perfekt. Wo kann ich das anpassen?
Ggf. könnten Sie einen oder mehrere unsichtbaren Trennstriche (weisen den Browser an ggf. an dieser Stelle zu trennen) in die Adresse einfügen, damit diese (falls zu lange) auch umbrochen werden kann. In der Quelltext-Ansicht des Editors kann man einen solchen Trennstrich als ­ (soft hyphen) eingeben.
Danke, ich habe jetzt einfach ein Leerzeichen in den Linktext eingefügt, damit bricht er auch um und es fällt nicht sonderlich auf. Der "soft Hyphen hatte leider nicht funktioniert in der Vorschau.
Sie können statt ­ auch ALT+0173 als Code für das Trennzeichen probieren.
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
Wenn Sie neu bei uns sind, hilft Ihnen unsere Hilfe-Seite dabei, sich im Forum zurechtzufinden. Dort erfahren Sie alles Wichtige, von der Registrierung bis hin zur Erstellung eigener Themen (Fragen).
Ohne Programmierkenntnisse gleich mit Zeta Producer loslegen. Layout auswählen, Text eingeben – fertig. Kostenloser Support und über 99% zufriedene Kunden. Überzeugen Sie sich selbst!
