Search…

X3 Photo Gallery Support Forums

Search…
 
rob_528
Topic Author
Posts: 6
Joined: 12 Aug 2019, 15:23

responsive Layout

30 Sep 2019, 02:39

Die Darstellung meiner Webseite (robbylorenz.de) auf einem Computerbildschirm ist gut. Immer mehr User sind aber mit ihren mobilen Endgeräten online. Die Darstellung auf einem iPad ist nicht mehr ganz so gut, weil die Fotos nicht in der definierten Größe angezeigt werden. Alle Bilder werden deutlich größer dargestellt. Vermutlich weil das Tablet eine höhere Auflösung als der Schreibtisch-Bildschirm hat. Wirklich schlecht ist die Darstellung auf einem Smartphone. Die querformatigen Fotos werden als Hochformate mit einem starken Ausschnitt angezeigt. Wie kann ich dafür sorgen, dass diese Fotos auf dem Handy und dem Tablet sofort beim Aufrufen der Webseite ganz, also unbeschnitten, zu sehen sind? Gibt es eine Möglichkeit?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 11741
Joined: 30 Sep 2006, 03:37

Re: responsive Layout

30 Sep 2019, 03:16

Es ist ein bisschen schwer zu verstehen, was du hier genau meinst. X3 wurde bereits von Grund auf sorgfältig entwickelt, um auf allen Geräten reagieren zu können. Dazu gehört nicht nur das Ausblenden von Layouts für schmale Smartphonebildschirme, sondern auch das Laden von Bildern in perfekter Größe, um sie an die Bildschirmgröße und die Pixelauflösung anzupassen (wie Sie wissen, sind einige Desktops und die meisten Mobiltelefone keine "Netzhaut" mit hoher Dichte. Bildschirme mit doppeltem oder höherem Pixelverhältnis).

In Ihren Galerien verwenden Sie das COLUMNS-Layout, und wie Sie sehen werden, ändern sich die Spalten abhängig von der Größe des Bildschirms. Ihre Spalten werden durch WIDTH definiert. Auf Desktops passen Sie mehr Spalten an, und auf kleineren Bildschirmen passen Sie weniger Spalten bis hinunter zu einer einzelnen Spalte an. Perfekt ansprechbar.

Darüber hinaus wird das geladene Bild perfekt für die jeweilige Bildschirmpixeldichte optimiert. Wenn das Bild auf dem Bildschirm beispielsweise eine Breite von 320 Pixel hat und der Bildschirm "Netzhaut" (2x Pixeldichte) ist, wird vom Server ein Bild um 640 Pixel angefordert. Beachten Sie, dass X3 keine größeren Bilder als Ihre ursprünglich hochgeladene Auflösung anfordern kann. Zum Beispiel ist Ihr Bild hier nur 533 px breit (533 x 800). Dieses Bild wird auf modernen Mobilgeräten mit 2000 px + -Displays nicht besonders gut aussehen. ... Das iPad hat normalerweise eine Breite von> 2000 px, und selbst das iPhone 7 plus hat eine Größe von 1920 x 1080. Originalbilder, die kleiner als die Pixelauflösung sind, sehen nicht optimal aus.

Ich bin ein bisschen überrascht, wie Sie zu dem Schluss gekommen sind, dass X3 nicht reagiert. Ich habe Ihre Website überprüft, und Sie müssen sicher sein, dass sich das Layout an alle Bildschirmgrößen anpasst. Sie können auch unsere Demo überprüfen. In Position geladene Bilder sind ebenfalls optimal, aber X3 kann natürlich kein größeres Bild als das von Ihnen hochgeladene Original laden.

An Ihrem reaktionsschnellen Layout ist nichts auszusetzen:
Image
 
rob_528
Topic Author
Posts: 6
Joined: 12 Aug 2019, 15:23

Re: responsive Layout

01 Oct 2019, 10:56

Vielen Dank für Deine Antwort.
 
Wegen der Google-Übersetzung kommt es zu Missverständnissen. Ich meine die Darstellung meiner Startseite (home). Diese sieht auf einem PC-Bildschirm (1920 x 1080) gut aus. Siehe 1. Screenshot. Meine Startseite sieht auf meinem Handy nicht gut aus. Siehe 2. Screenshot.
Verstehst Du jetzt mein Problem?
Attachments
1. Screenshot.jpg
Anzeige auf einem Desktop-PC-Bildschirm
1. Screenshot.jpg (218.67 KiB) Viewed 32 times
2. Screenshot.jpg
Anzeige auf meinem Handy
2. Screenshot.jpg (93.32 KiB) Viewed 32 times
 
User avatar
mjau-mjau
X3 Wizard
Posts: 11741
Joined: 30 Sep 2006, 03:37

Re: responsive Layout

01 Oct 2019, 23:40

Ja ich verstehe. Dies ist jedoch weniger ein technisches als vielmehr ein logisches Problem. Zunächst haben Sie in den Diashow-Einstellungen für diese Seite die Option "fit: none" festgelegt. Dies bedeutet, dass Bilder immer in ihrer Originalgröße angezeigt werden. Aus Ihrem Screenshot geht hervor, dass Sie einen relativ großen Bildschirm haben und das Bild von Natur aus in der Größe angepasst ist. Auf meinem 13 "-Bildschirm decken die Bilder ungefähr den verfügbaren Bildschirm ab. Auf Mobilgeräten sieht das allerdings nicht gut aus. X3 kann diese" Landschaftsbilder "im vertikalen Mobilmodus nicht auf magische Weise gut aussehen lassen, insbesondere nicht mit der Einstellung" fit: none " angewendet.

Wenn Sie die erweiterten Einstellungen in der Diashow wirklich anpassen möchten, müssen Sie möglicherweise überlegen, was Sie tun, und möglicherweise Tests mit unterschiedlichen Bildschirmgrößen durchführen.

With the above said, you will still need to take into consideration how your slideshow intro will look across all screens sizes and aspects. You have the challenge of making landscape images look good in vertical devices, and also large screens vs small screens. For example, on my own website mjau-mjau.com, you will find that the images are set to SCALE (because it looks nicest as an intro), and the images selected will also look "ok" on mobile devices. You can choose to set the slideshow to "contain" instead of "cover", which means they won't be cut off, but then you will have variable margins on the sides of the images, depending on screen aspect vs image aspects.

Alles in allem sollte das Diashow-Intro als "Teaser" betrachtet werden, da es logischerweise nicht möglich ist, eine Gruppe von Bildern mit bestimmten Aspekten und Größen auf allen Geräten mit unterschiedlichen Bildschirmgrößen und Aspekten gut aussehen zu lassen. Aus diesem Grund verwenden die Galerien in X3 einen POPUP-Mechanismus, der optimiert ist, um Bilder in allen Aspekten von allen Geräten so gut wie möglich anzuzeigen. Das Diashow-Intro ist jedoch eine gute Wahl, um es als Intro zu verwenden. Sie müssen sich jedoch überlegen, wie Ihre Bilder auf verschiedenen Bildschirmen funktionieren können. Meine Empfehlung wäre zunächst, zumindest den Modus "Cover" oder "Enthalten" festzulegen und dann erneut vom Handy aus zu überprüfen.
 
rob_528
Topic Author
Posts: 6
Joined: 12 Aug 2019, 15:23

Re: responsive Layout

02 Oct 2019, 06:13

Vielen Dank für die ausführliche Antwort. Das probiere ich aus.