Hilfe gesucht - mobile Devices
Hilfe gesucht - mobile Devices
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ö.
Last edited by frase on Tue Jun 12, 2018 8:07 am, edited 1 time in total.
Re: Hilfe gesucht - mobile Devices
MM einfach SUPER!!! Ich würde wohl nichts mehr damit weitermachen. Es ist zwar möglich (theoretisch) fast alles so einstellen, dass es jedem Gerät, jedem Browser, jedem Besucher entgegenzukommen, aber ist es unbedingt nötig?
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.
Re: Hilfe gesucht - mobile Devices
Umgekehrt. So wie es jetzt steht, ist es einfach konkurenzloss super. Es ist vieles möglich, soweit es um Design geht, aber die browserabhängige Funktionalität finde ich nicht so wichtig.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.
Re: Hilfe gesucht - mobile Devices
Super, gefällt mir.
Kann ich bestätigen, bei mir genauso.
Ich weiß nicht ob es hilft, aufgefallen ist mir, dass der html- und der body_Bereich unterschiedliche Höhen haben. Ich habe dem body-Tag mal ein height von 100% verpasst, so stimmen beide überein. Aber dann tritt genau der Effekt auf, das Hintergrundbild scrollt mit (getestet mit Chrome Brosertools z.B. iPad). Entfernt man nun das overflow-x: hidden; im html-Tag so funktioniert es wie gewollt
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage
Re: Hilfe gesucht - mobile Devices
Gut. Aber - wat sagstn zu dem :target-Menü?
Geht das überhaupt so?
Da wäre mir deine Meinung schon wichtig.
Leider ergibt das noch mehr unerwartete Effekte auf dem Android-Tablet mit Chrome.lck wrote: ↑Sat Jun 02, 2018 12:25 pmIch weiß nicht ob es hilft, aufgefallen ist mir, dass der html- und der body_Bereich unterschiedliche Höhen haben. Ich habe dem body-Tag mal ein height von 100% verpasst, so stimmen beide überein. Aber dann tritt genau der Effekt auf, das Hintergrundbild scrollt mit (getestet mit Chrome Brosertools z.B. iPad). Entfernt man nun das overflow-x: hidden; im html-Tag so funktioniert es wie gewollt
Einzige Änderung, die ich jetzt (nach Tests mit deinen Vorschlägen) gemacht habe ist: html Höhe 100vh statt 100%.
Bei Chrome kommt nach erschwerend hinzu, dass das Browsermenü beim Wischen verschwindet und somit die Viewporthöhe wieder anders ist. Das kann man im FF unter Android ausschalten (was ich auch so habe). Hat allerdings nichts mit dem Wegscrollen des farbigen Hintergrundbildes zu tun.
Eine vefixte (sorry) verflixte Sache.
Re: Hilfe gesucht - mobile Devices
Das muss ich mir noch genau anschauen, je weniger Javascript desto besser.
Verschiebe doch mal das Hintergrundbild von html zum body-Tag, das sollte ganauso funktionieren.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage
Re: Hilfe gesucht - mobile Devices
Es gab irgendeinen wichtigen Grund, warum ich das so gemacht habe - den habe ich allerdings vergessen
Trotzdem getestet: Keine Änderung.
Es geht ja eigentlich auch nur um das Hintergrundbild im Div "splash-container".
Das ist nicht irgend so ein banales CSS-Problem.
Hier muss ein echter "Hack" her.
P.S.:
Ich bekomme die Nachrichten vom Forum (und nur von hier) neuerdings erst mit ca. 1 Tag Verspätung.
Kann das jemand bestätigen? Gibt es einen Grund?
Re: Hilfe gesucht - mobile Devices
Hmm, eben getestet... kam sofort bei mir an .
BTW: schönes Template, tolle Arbeit! Mitreden beim aktuellen Problem kann ich leider nicht .
Re: Hilfe gesucht - mobile Devices
Ja, gerade eben erst die Nachrichten erhalten, das du und Holger geantwortet haben und das erst um 22:05 Uhr.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage