Fullscreen API: Anwendungsfall gesucht
Matthias Scharwies
- javascript
Servus!
Ich lese mich grad in die Fullscreen API ein und möchte ein passendes Andwendungsbeispiel erstellen.
Da man mit der Pseudoklasse :fullscreen
das Styling an den größeren Bildschirm anpassen kann, würde ich das gerne mit einbauen, habe aber noch keine Idee dafür! Fällt jemandem was ein?
Die Problematik, Benutzern eine bestimmte Darstellung aufzuzwingen, wie hier im Forum (Automatisch in Vollbildmodus wechseln angesprochen, ist mir bewusst.
@j4nk3y Hast du eine Idee, was man vorstellen könnte?
Herzliche Grüße
Matthias Scharwies
Tach!
Ich lese mich grad in die Fullscreen API ein und möchte ein passendes Andwendungsbeispiel erstellen.
Ein klassischer Fall dafür ist ein Kiosk-System.
Da man mit der Pseudoklasse
:fullscreen
das Styling an den größeren Bildschirm anpassen kann, würde ich das gerne mit einbauen, habe aber noch keine Idee dafür! Fällt jemandem was ein?
Man kann dieselbe Anwendung für den Pantoffel-Besucher und den Museumsbesucher gestalten, oder wo auch immer die Präsentation vor Ort geschehen soll.
Die Problematik, Benutzern eine bestimmte Darstellung aufzuzwingen, wie hier im Forum (Automatisch in Vollbildmodus wechseln angesprochen, ist mir bewusst.
Das trifft ja nur für Besucher mit Individualgeräten zu. Wenn das Gerät vorgegeben und nur für diesen Anwendungsfall vorgesehen ist, sieht die Sachlage schon anders aus.
dedlfix.
Servus!
Tach!
Ich lese mich grad in die Fullscreen API ein und möchte ein passendes Andwendungsbeispiel erstellen.
Ein klassischer Fall dafür ist ein Kiosk-System.
Da man mit der Pseudoklasse
:fullscreen
das Styling an den größeren Bildschirm anpassen kann, würde ich das gerne mit einbauen, habe aber noch keine Idee dafür! Fällt jemandem was ein?Man kann dieselbe Anwendung für den Pantoffel-Besucher und den Museumsbesucher gestalten, oder wo auch immer die Präsentation vor Ort geschehen soll.
Stimmt. Das ist eine gute Idee. Jetzt muss ich nur noch ein virtuelles Museum aus dem Boden stampfen. 😬
Herzliche Grüße
Matthias Scharwies
Servus!
Ich bin mit dem Tutorial ein bisschen weiter:
Die Problematik, Benutzern eine bestimmte Darstellung aufzuzwingen, wie hier im Forum (Automatisch in Vollbildmodus wechseln angesprochen, ist mir bewusst.
Das trifft ja nur für Besucher mit Individualgeräten zu. Wenn das Gerät vorgegeben und nur für diesen Anwendungsfall vorgesehen ist, sieht die Sachlage schon anders aus.
Das hab ich erst im praktischen Beispiel rausgefunden, dass man immer vom Browser gewarnt wird und zustimmen muss.
Beim ersten Beispiel habe ich Probleme. Vollbildmodus der Gesamtseite geht immer, eines Elements (bes. Bild) geht in den Webkit-Browsern nicht, man sieht nur schwarz.
Das zweite Beispiel umgeht diese Problematik, indem das Bild mit CSS entsprechend vergrößert wird.
Schaut Euch das mal an. Für Kritik, Verbesserungen und Anregungen bin ich immer dankbar.
Herzliche Grüße
Matthias Scharwies
Hallo Matthias Scharwies,
Da man mit der Pseudoklasse
:fullscreen
das Styling an den größeren Bildschirm anpassen kann, würde ich das gerne mit einbauen, habe aber noch keine Idee dafür! Fällt jemandem was ein?Die Problematik, Benutzern eine bestimmte Darstellung aufzuzwingen, wie hier im Forum (Automatisch in Vollbildmodus wechseln angesprochen, ist mir bewusst.
Das sollte garnicht gehen, dass wechseln zwischen den Modi ist nur auf Benutzereingabe möglich. So sagt es meine Console jedenfalls. (Das sollte als Hinweis auch noch in das Wiki)
@j4nk3y Hast du eine Idee, was man vorstellen könnte?
Nein, leider nicht. Da ich seit Anfang an Versuche den Aufbau, ohne spezielles ansprechen in der CSS, so Resonsive wie möglich zu gestalten, bin ich auf diese nur einmal gestoßen, da anscheinend die default Hintergrundfarbe Weiss ist und ein ändern ohne :fullscreen
, diese nicht für den Vollbild modus wechselt.
Was mir im Wiki auch aufgefallen ist, ist img
wirklich ein klickbares Element? Ich meine, ja es taucht dort auf, trotzdem kommt mir das eher seltsam vor.
Gruß
Jo
Hallo j4nk3y,
Ja, im Falle von Imagemaps, sonst nicht.
Da macht es auch Sinn, aber so wie es im Wiki aussieht, ist jedes Bild gemeint.
Welche Seite meinst du?
Bis demnächst
Matthias
Hallo Matthias,
Da macht es auch Sinn, aber so wie es im Wiki aussieht, ist jedes Bild gemeint.
Welche Seite meinst du?
Die Wiki Seite zur Fullscreen API. Dort im Anwendungsbeispiel, hat das <img>
kein usemap
deklariert, ergo kein interaktives Element.
Wie gesagt, das ist mir nur aufgefallen und ich will da nicht drauf rum reiten.
Gruß
Jo
Servus!
Die Problematik, Benutzern eine bestimmte Darstellung aufzuzwingen, wie hier im Forum (Automatisch in Vollbildmodus wechseln angesprochen, ist mir bewusst.
Das sollte garnicht gehen, dass wechseln zwischen den Modi ist nur auf Benutzereingabe möglich. So sagt es meine Console jedenfalls. (Das sollte als Hinweis auch noch in das Wiki)
Das steht oben im 3. Absatz. Sollte man das noch prominenter platzieren?
Was mir im Wiki auch aufgefallen ist, ist
img
wirklich ein klickbares Element? Ich meine, ja es taucht dort auf, trotzdem kommt mir das eher seltsam vor.
Im 2. Beispiel ist die id #bild im figure-Element (Eigentlich wollte ich den Button zur Bedienung in die figcaption integrieren - hat sich durch die browserinternen Buttons aber erledigt.)
Gruß
Jo
Herzliche Grüße
Matthias Scharwies
Hey,
Das sollte garnicht gehen, dass wechseln zwischen den Modi ist nur auf Benutzereingabe möglich. So sagt es meine Console jedenfalls. (Das sollte als Hinweis auch noch in das Wiki)
Das steht oben im 3. Absatz. Sollte man das noch prominenter platzieren?
Ich hab es Überlesen. Aber ich meine, dass ein Aufruf der enterFullscreen()
,exitFullscreen()
generell nur nach Nutzereingabe ausgeführt wird. Falls man diese z.b mit <body onLoad="enterFullscreen">
aufrufen möchte, sollte das fehlschlagen.
Gruß
Jo
Hey,
Funktioniert den das Anwendungsbeispiel bei euch? Bei mir nämlich nicht, somit bekomme ich schon mal den Hinweis, warum meine Funktion nicht funktioniert, da es somit an irgendwelchen lokalen Einstellungen bei mir liegen muss.
Gruß
Jo
Servus!
Hey,
Funktioniert den das Anwendungsbeispiel bei euch? Bei mir nämlich nicht,
Ich habe im Wiki zum 1. Beispiel geschrieben: Beachten Sie: Das Beispiel funktioniert im Firefox und IE11 wie gewünscht: Bei einem Klick auf den Button wird die gesamte Seite, bei einem Klick auf das Bild nur das Bild im Vollbildmodus angezeigt.
In Chrome und Safari wird bei einem Klick auf das Bild zwar der Vollbildmodus angezeigt, das Bild aber nicht dargestellt.
Deshalb habe ich das 2. Bespiel mit der ganzen Seite im Vollbildmodus realisiert.
Wenn ihr mir sagen könntet, wie man's besser hinkriegt, wäre ich Euch dankbar!
somit bekomme ich schon mal den Hinweis, warum meine Funktion nicht funktioniert, da es somit anirgendwelchen lokalen Einstellungen bei mir liegen muss.
Gruß
Jo
Herzliche Grüße
Matthias Scharwies