HTML WEBSITE WIRD FALSCH AUF SAFARI ANGEZEIGT

[Emely]

Ah danke für die Info, wenn ich ehrlich bin lag das dadran, dass ich nicht wusste wie man die Fensterbreite angibt, auch in px? Und wo finde ich die fensterbreiten?

 

[MrMurphy]

Für die Abfrage der Fensterbreiten verwendest du entweder min-width oder max-width. Entweder ... oder ... ist dabei wichtig, nicht beides zusammen.

Mit den device-width-Abfragen kannst du zudem keine Geräte ansprechen. Wie bereits geschrieben spielen die Endgeräte beim Erstellen von Webseiten keine Rolle.

Zudem sollte Bildern im HTML-Quelltext keine feste Größe über Attribute zugewiesen werden. Das führt bei flexiblen Webseiten regelmäßig zu Problemen.

 

[Emely]

Okay ich habe für ipad und iphone tatsächlich min und max width eingesetzt. Das werde ich ändern.
Was meinst du mit dem device width abfragen? Was soll ich denn verwenden ? Die grössen habe ich nur bei der ipad version festgelegt, da ich dort inline block verwendet habe

 

[MrMurphy]

Die device-width-Abfragen komplett weglassen. Und nicht versuchen die Webseite für spezielle Endgeräte wie ipad oder iphone anzupassen. Das hilft nicht weiter.

 

[Emely]

Wenn ich das nicht mache wird es auf ipad und iphone so angezeigt wie im anhang, der nimmt den flex befehl nicht und skaliert somit die bilder nicht, die werden dann in voller grösse angezeigt

 

[MrMurphy]

Ich kann nur nach deiner Online-Seite gehen. Da ist das CSS nicht angepasst, es stehen immer noch die device-Abfragen drin. Zudem werden mit den device-Abfragen die Flex-Anweisungen überschrieben. Flex wird also ausgeschaltet. Dann kann Flex natürlich nicht funktionieren.

Was soll sich bei schmaler Fensterbreite überhaupt ändern? Das ist aus deinem Quelltext nicht nachvollziehbar. Die Bilder werden nur kleiner, aber nicht anders angeordnet.

 

[Emely]

In dem Anhang ist mein css dokument.. ich habe die Änderung für schmalerer Fensterbreiten gemacht, weil ich in der handy version andere bilder verwendet habe

 

[MrMurphy]

Es gibt keine Handy-Version. Mit solchen Bezeichnungen führst du dich nur selbst in die Irre. Genau wie mit Bezeichnungen wie ipad.

Zudem stehen in deinem Quelltext immer noch min-device-width und max-device-width.

Im HTML-Quelltext fehlt jetzt die viewport-Angabe.