Hilfe gesucht - mobile Devices
Posted: Sat Jun 02, 2018 8:27 am
Hi,
aus einem Kundenprojekt heraus, bin ich auf die Idee gekommen, mal wieder ein Template für die XH-Community zu bauen - vielleicht!?
Mir ist nämlich die altbekannte Pseudoklasse :target mal wieder eingefallen - die ich bislang zwar kannte, aber nie angewendet habe. Ich habe jetzt also begonnen, ein fhs-target-Template zu erstellen (noch sehr früh).
:target verwende ich für die Anzeige der Navigation - eben an zwei verschiedenen Stellen der Seite. Normal befindet sich das Menü unten im Footer. Es zeigt nur Menüpunkte Level 1 an. Am oberen rechten Rand der Seite befindet sich noch ein Hamburger-Symbol. Ein Klick darauf öffnet die Ansicht des "normalen" Menüs mit entsprechenden Unterpunkten. Das ist das ":target-Menü". Es ist NICHT zweimal auf der Seite, sondern wird nur durch :target an einer anderen Stelle angezeigt (im Footer verschwindet die Anzeige). Damit ist alles, was die Navigation betrifft mit reinem CSS gelöst. Ist Javacript ausgeschaltet funktioniert trotzdem alles identisch - auch die Animation.
Zu diesem Menü lautet meine Frage einfach: Ist das sinnvoll und praktikabel?
Ich habe aber noch ein schwerwiegenderes Problem auf meiner Testseite (Link unten).
Es gibt eine Landingpage (Start), die als einzeln bearbeitbare XH-Seite vorhanden ist. Die Landingpage befindet sich in einem Container (splash-container) und hat ein festes Hintergrundbild. Sinnigerweise habe ich für das Thema :target eine Zielscheibe gewählt (farbig, SVG, 2K).
Der (allgemeine) Body hat ebenfalls eine Zielscheibe als festen Hintergrund - allerdings schwarz/weiß (SVG, 2K).
Kommt man auf die Landingpage und scrollt dann nach unten, wird je nach Scrollposition aus der farbigen Zielscheibe eine schwarz-weiße.
Das funktioniert in allen gängigen Browsern ziemlich gut.
Auch in einigen mobile-Browsern (zumindest die, die ich testen kann) klappt das - nur nicht in Chrome unter Android. Hier scrollt das Hintergrundbild mit und ist nicht fix.
Klar, dass ich mir nun mehrere Stunden Zeit nahm und nach einer Lösung suchte - ohne Erfolg!
Was herauskam:
Einige Browserhersteller unterbinden fixe Hintergrundbilder in ihren mobile-Browser-Versionen aus "Energiespar- und Performance-Gründen"!
Fixe Hintergrundbilder (gerade bei Parallax-Effekten) verlangen enorme Rechenleistung und damit auch Strom. Um bei Mobilgeräten einen (fraglichen) Wettbewerbsvorteil zu haben, wird z.B. in mobile-Chrome diese Funktion unterbunden.
Ich fand im Netz einige Workarounds, die dieses Problem umgehen sollten - taten es in meinem Fall aber nicht.
Hier kommt meine Frage:
Kennt jemand eine Lösung? - Oder: Ist das alles gar nicht so schlimm?
Hier noch der Link zu meiner Testseite. Alles noch "roh" nicht fertig gestyled. Alles Fantasie (Firmennname, Logo usw.)! Keine Inhalte!
Anschauen
P.S.:
Das Hamburger-Symbol kann man mit Accesskey [1] öffnen und mit [2] wieder schließen - was ziemlich sinnfrei ist, denn diese Tasten-Kombi wird niemand kennen
Trotzdem ist das Menü "zugänglich".
Noch ein P.S.:
Als CSS-Framework habe ich mal "PURE" probiert. Mal sehen, ob das was bringt.
Nö.
aus einem Kundenprojekt heraus, bin ich auf die Idee gekommen, mal wieder ein Template für die XH-Community zu bauen - vielleicht!?
Mir ist nämlich die altbekannte Pseudoklasse :target mal wieder eingefallen - die ich bislang zwar kannte, aber nie angewendet habe. Ich habe jetzt also begonnen, ein fhs-target-Template zu erstellen (noch sehr früh).
:target verwende ich für die Anzeige der Navigation - eben an zwei verschiedenen Stellen der Seite. Normal befindet sich das Menü unten im Footer. Es zeigt nur Menüpunkte Level 1 an. Am oberen rechten Rand der Seite befindet sich noch ein Hamburger-Symbol. Ein Klick darauf öffnet die Ansicht des "normalen" Menüs mit entsprechenden Unterpunkten. Das ist das ":target-Menü". Es ist NICHT zweimal auf der Seite, sondern wird nur durch :target an einer anderen Stelle angezeigt (im Footer verschwindet die Anzeige). Damit ist alles, was die Navigation betrifft mit reinem CSS gelöst. Ist Javacript ausgeschaltet funktioniert trotzdem alles identisch - auch die Animation.
Zu diesem Menü lautet meine Frage einfach: Ist das sinnvoll und praktikabel?
Ich habe aber noch ein schwerwiegenderes Problem auf meiner Testseite (Link unten).
Es gibt eine Landingpage (Start), die als einzeln bearbeitbare XH-Seite vorhanden ist. Die Landingpage befindet sich in einem Container (splash-container) und hat ein festes Hintergrundbild. Sinnigerweise habe ich für das Thema :target eine Zielscheibe gewählt (farbig, SVG, 2K).
Der (allgemeine) Body hat ebenfalls eine Zielscheibe als festen Hintergrund - allerdings schwarz/weiß (SVG, 2K).
Kommt man auf die Landingpage und scrollt dann nach unten, wird je nach Scrollposition aus der farbigen Zielscheibe eine schwarz-weiße.
Das funktioniert in allen gängigen Browsern ziemlich gut.
Auch in einigen mobile-Browsern (zumindest die, die ich testen kann) klappt das - nur nicht in Chrome unter Android. Hier scrollt das Hintergrundbild mit und ist nicht fix.
Klar, dass ich mir nun mehrere Stunden Zeit nahm und nach einer Lösung suchte - ohne Erfolg!
Was herauskam:
Einige Browserhersteller unterbinden fixe Hintergrundbilder in ihren mobile-Browser-Versionen aus "Energiespar- und Performance-Gründen"!
Fixe Hintergrundbilder (gerade bei Parallax-Effekten) verlangen enorme Rechenleistung und damit auch Strom. Um bei Mobilgeräten einen (fraglichen) Wettbewerbsvorteil zu haben, wird z.B. in mobile-Chrome diese Funktion unterbunden.
Ich fand im Netz einige Workarounds, die dieses Problem umgehen sollten - taten es in meinem Fall aber nicht.
Hier kommt meine Frage:
Kennt jemand eine Lösung? - Oder: Ist das alles gar nicht so schlimm?
Hier noch der Link zu meiner Testseite. Alles noch "roh" nicht fertig gestyled. Alles Fantasie (Firmennname, Logo usw.)! Keine Inhalte!
Anschauen
P.S.:
Das Hamburger-Symbol kann man mit Accesskey [1] öffnen und mit [2] wieder schließen - was ziemlich sinnfrei ist, denn diese Tasten-Kombi wird niemand kennen
Trotzdem ist das Menü "zugänglich".
Noch ein P.S.:
Als CSS-Framework habe ich mal "PURE" probiert. Mal sehen, ob das was bringt.
Nö.