bei kleinen viewports index.html und css austauschen

[tanja]

Hallo, schreib das erste mal in einen Thread.

Ich möchte eine Galerie, die ich im Internet gefunden habe, in meine Webseite einbauen. Die Bilder werden per horizontalen Maus-Scroll gezeigt. Ich habe nicht bemerkt, dass das scrollen auf Handys nicht funktioniert. Ich habe eine zweite Galerie gefunden, die auf kleinere Viewports einsetzbar ist.

Nun weiß ich nicht, wie man im Head die Größe des Viewports abfragt, um dann auf die entsprechende index.html mit der dazugehörigen CSS-Datei verweisen kann.

[Matthias Scharwies]

Servus!

Hallo, schreib das erste mal in einen Thread.

Ich möchte eine Galerie, die ich im Internet gefunden habe, in meine Webseite einbauen. Die Bilder werden per horizontalen Maus-Scroll gezeigt. Ich habe nicht bemerkt, dass das scrollen auf Handys nicht funktioniert. Ich habe eine zweite Galerie gefunden, die auf kleinere Viewports einsetzbar ist.

Nun weiß ich nicht, wie man im Head die Größe des Viewports abfragt, um dann auf die entsprechende index.html mit der dazugehörigen CSS-Datei verweisen kann.

Das Konzept ist so, dass du

• den Inhalt Deiner Webseite mit HTML EINMAL in der index.html auszeichnest
• im CSS dann das Aussehen festlegst.
  • Dabei baust du dann Abfragen (Media_Queries) ein, die der Browser des Geräts dann entsprechend auswertet.

Ein Grundlagen-Artikel: CSS/Tutorials/Einstieg/Media_Queries

Herzliche Grüße

Matthias Scharwies

[tanja]

Hallo Matthias, erstmal vielen Dank für die schnelle Rückmeldung.

Ich habe mich missverständlich ausgedrückt.

Die erste Galerie funktioniert auf dem Handy nicht, weil man da nicht mit einer Maus scrollen kann und sie keine Wisch-Funktion hat. Die zweite Galerie funktioniert auf dem Handy, weil man per Touch einen Pfeil anklicken kann, der dann das nächste Bild zeigt.

Nun soll also auf Computern mit Maus-Bedienung die eine Galerie und auf Endgeräten mit touch, die zweite Galerie angezeigt werden können.

LG Tanja

[Auge]

Hallo

Hallo Matthias, erstmal vielen Dank für die schnelle Rückmeldung.

Ich habe mich missverständlich ausgedrückt.

Nein, hast du nicht. Du bist nur mit – so wie formuliert – nicht erfüllbaren Erwartungen angetreten.

Tschö, Auge

[Gunnar Bittersmann]

@@tanja

Nun soll also auf Computern mit Maus-Bedienung die eine Galerie und auf Endgeräten mit touch, die zweite Galerie angezeigt werden können.

Wenn du einen Zusammenhang zwischen Mausbedienung/Touchbedienung und großem/kleinem Bildschirm siehst, bist du auf dem falschen Weg.

Außerdem gibt es Geräte, die sowohl Mausbedienung als auch Touchbedienung ermöglichen.

Wie schon gesagt wurde: Nimm ein Karussell, das beides ermöglicht. Und Tastaturbedienung natürlich auch!

In den Inclusive Components findest du A Content Slider.

😷 LLAP

[Auge]

Hallo

schreib das erste mal in einen Thread.

Na denn mal …

Ich möchte eine Galerie, die ich im Internet gefunden habe, in meine Webseite einbauen. Die Bilder werden per horizontalen Maus-Scroll gezeigt. Ich habe nicht bemerkt, dass das scrollen auf Handys nicht funktioniert.

Dann ist sie funktional kaputt. Scrollen per Wisch ist heutzutage Grundfunktionalität und muss funktionieren.

Ich habe eine zweite Galerie gefunden, die auf kleinere Viewports einsetzbar ist.

Ist die eventuell mit Anpassungen auch auf großen Viewports zu gebrauchen? Wenn, dann bräuchtest du keine andere parallele Lösung.

Nun weiß ich nicht, wie man im Head die Größe des Viewports abfragt, um dann auf die entsprechende index.html mit der dazugehörigen CSS-Datei verweisen kann.

Kurz: so, wie du das gerade beschriebst, überhaupt nicht.

Lang: es gibt serverseitige Skripte, die versprechen, aus der Anfrage des Browsers auf die Geräteklasse und die Viewportgröße schließen zu können. Das funktioniert nicht zuverlässig. Es gibt die Möglichkeit per JavaScript die Viewportgröße zu ermitteln und eine Umleitung zu schalten. Aber das funktioniert erst mitten im oder nach dem initialen Ladevorgang der Galerie. Auch nicht prickelnd.

Die von matthas avisierte Lösung ist der zu beschreitende Weg. Aber dafür musst du dich für eine und eine funktioneirende Lösung entscheiden und die dann an die verschiedenen Viewport-Formate anpassen.

Tschö, Auge

[Rolf B]

Hallo Auge,

Lang: es gibt serverseitige Skripte, die versprechen, aus der Anfrage des Browsers auf die Geräteklasse und die Viewportgröße schließen zu können

Es gibt auch clientseitige Scripte, die die Viewportgröße abfragen können und je nach Ergebnis die eine oder andere Galerie einblenden können.

Aber das ist nicht zielführend! Warum zwei verschiedene Galerien verwenden, wenn es mit einer geht? Wie schon geschrieben, besteht der richtige Weg darin, die bedienbare Galerie auf allen Geräten einzusetzen und mit Media-Queries passend zu konfigurieren. Die unbedienbare Galerie gehört in die Tonne.

So wie die Frage gestellt ist, besteht Tanjas Problem vermutlich darin, dass sie zu wenig Ahnung hat von dem, was sie tut. Statt dessen ist sie als Jägerin und Sammlerin unterwegs und möchte eine fertige Lösung kopieren. Sorry. Das funktioniert für einige Basics, aber nicht, wenn es komplexer wird. Responsives Verhalten ist zwar heute eine Basisfunktion einer Webseite, aber leider schon im komplexeren Bereich. Da muss man schon Energie ins Verstehen investieren.

Rolf

[tanja]

Naja, unversucht will ich es nicht lassen zu fragen, ob sich jemand das script der ersten Galerie anschauen könnte, um entscheiden zu können, ob es grundsätzlich touch-fähig wäre (es ist ein aktuelles script) und falls ja, ob es einen großen Aufwand bedeuten würde es zu ergänzen.

Ansonsten funktioniert die zweite Galerie und kann weiter angepasst werden. (Die erste Galerie ist halt besonders schön)

Jägerin und Sammlerin in Einem zu sein, ist auch was besonderes :)

LG Tanja

[Rolf B]

Hallo tanja,

Ich möchte eine Galerie, die ich im Internet gefunden habe, in meine Webseite einbauen.

Naja, unversucht will ich es nicht lassen zu fragen, ob sich jemand das script der ersten Galerie anschauen könnte,

Ich sag's mal mit den Worten von Deep Thought: Knifflig!

Vor allem, wenn man gar nicht weiß, welche Galerie Du gefunden hast.

Touch-Gesten zu deuten ist sicher etwas, das man hinzufügen kann. Aber damit kommen wir dann zu dem Punkt, den ich vorher schon ansprach: Jäger, Sammler, Copy und Paste. Schenk mir deine Hilfe! Das sind sicherlich etliche Stunden Arbeit, wonach Du hier fragst. Meine Stunde kostet normalerweise eine Menge Geld.

Leuten beim Lernen helfen - ja. Dafür bin ich hier. Dabei lerne ich zumeist auch selbst noch etwas. Aber poste mal den Link, vielleicht schenkt Dir ja jemand die Stunden.

Rolf

[tanja]

Ok, Danke für eure Antworten.

Ich gebe mich für den Moment geschlagen.

.. Vielleicht ist es nur eine Kleinigkeit und die Wisch-Funktion der ersten Galerie ist umsetzbar.

LG Tanja