[js] fullscreen mode detecteren

[Verwijderd]

Zijn er mensen met goede ideeen om te detecteren of een browser in fullscreen mode staat (lees: f11)? Ik wil namelijk mijn webapp mee laten switchen naar een fullscreen mode.

Wat ik tot dusver bij elkaar heb
- Opera past het css media type projection toe voor full screen mode.
- Firefox heeft een window.fullScreen property, maar die werkt alleen goed in fx 3

Niet veel dus, misschien andere ideeen? meten aan scherm breedtes lijkt me een beetje tricky, hoewel het vergelijken van outerWidth/Height en screen.width / height misschien een optie is. Je zou kunnen zeggen dat als het browservenster heel het scherm beslaat dat het dan per definitie fullscreen is.

Zijn er misschien mensen die iets kunnen zeggen over hoe dit gaat bij dual screens? en bij non-windows os's?

[Xcalibur]

Wat wil je precies aanpassen aan je applicatie?

Je hebt in principe geen idee hoe groot het scherm van je gebruiker is, dus moet je zorgen dat je applicatie er hoe dan ook mee om kan gaan (lees: binnen de resoluties die je ondersteunt). Detecteren of het scherm fullscreen is heeft daarom ook weinig functie lijkt me?

[SchizoDuckie]

Als ik hier in 'F11' mode zit in FF zie ik nog steeds m'n adresbalk, tabs, en searchbar (ctrl + F of / )

Deze kan ik stuk voor stuk nog onzichtbaar maken, waardoor de hoogtes wéér iets anders worden. Daar kan je dus allemaal gewoon geen zak mee als je het mij vraagt.

Waarom zou je niet überhaupt iets maken wat gewoon meeschaalt?

[ Voor 32% gewijzigd door SchizoDuckie op 10-02-2008 17:29 ]

[Verwijderd]

Het is niet zo gek om te bedenken dat in kiosk mode je misschien extra navigatie wilt laten zien zoals een terugknop. Het hoeft niet altijd alleen maar om de afmetingen te gaan.

[Verwijderd]

de boel is schaalbaar, werkt prima op alle resoluties, maar ik wil de gebruiker de gelegenheid geven om meer schermruimte vrij te maken voor het "werkveld", door in m'n applicatie bepaalde taakbalken te verbergen.

Het lijkt me nuttig als dit (ook) gebeurt als de gebruiker zelf op f11 drukt, dan wil ie blijkbaar mee werkveld, dus dan geef ik 'm dat ook

[Bozozo]

Dan zou ik daar gewoon een toggleknopje voor maken. De gebruiker kan dan altijd zelf kiezen of hij wel of geen werkbalken wil.

[Verwijderd]

De boel verzandt nu een beetje in "zou je dit wel willen", maar dat neemt niet weg dat het los van de toepassing (die ik overigens wel zinnig vind) wel een interessant vraagstuk is. Mijn eerste ingeving zou inderdaad zijn om de breedte van de viewport te vergelijken met de breedte van het scherm, al is een browser in een dual screen setup volgens mij full screen op 1 scherm, terwijl je met JS enkel de totale breedte van de 2 schermen kunt krijgen (of vergis ik me hierin?).

Mac OS heeft volgens mij niet eens iets als full screen, ik kan het iig niet vinden in Firefox en Safari?

[SchizoDuckie]

I'm with Bozozo. ik zou gewoon een toggle switch ervan maken in plaats van een stukje hidden functionaliteit waar je pas achter komt als je op F11 ramt

[Bosmonster]

Buiten dat kan het wel interessant zijn om te weten of iemand fullscreen draait of niet. Zoals Cheatah al zegt om bijvoorbeeld een Terug-knop te activeren, of om een 'terug naar windowed mode' knop toe te voegen bijvoorbeeld. Zo zijn er vast wel meer scenario's te bedenken.

Dus het zou leuk zijn als we kunnen focussen op de vraag van de TS ipv zijn motivatie.

[Cartman!]

Zou je dat niet kunnen detecteren aan de hand van de scherm resolutie en de grootte van het venster van de browser? Bij een minimale afwijking zou je dan kunnen zeggen dat de user bijna fullscreen werkt (kiosk mode). 100% failsafe is het alleen niet denk ik maar het is een optie.

edit: hier had je t dus zelf al over...

[ Voor 7% gewijzigd door Cartman! op 11-02-2008 10:47 ]

[Bosmonster]

Cartman! schreef op maandag 11 februari 2008 @ 10:46:
Zou je dat niet kunnen detecteren aan de hand van de scherm resolutie en de grootte van het venster van de browser? Bij een minimale afwijking zou je dan kunnen zeggen dat de user bijna fullscreen werkt (kiosk mode). 100% failsafe is het alleen niet denk ik maar het is een optie.

edit: hier had je t dus zelf al over...

Dat lijkt me ook de enige methode die in de buurt komt en kan werken onder de meeste browsers. Je zult denk ik echter nog steeds per browser moeten kijken naar bijvoorbeeld scrollbalken e.d., hoe de betreffende kiosk mode daar mee omgaat. Want het verschil in breedte tussen kiosk en gewoon gemaximaliseerd is slechts een paar pixels natuurlijk.

[BtM909]

Tik ff een klein testpaginaatje, dan kunnen we het hier testen mbt andere OS-en en multi-screen

[Cartman!]

Bosmonster schreef op maandag 11 februari 2008 @ 10:53:
[...]


Dat lijkt me ook de enige methode die in de buurt komt en kan werken onder de meeste browsers. Je zult denk ik echter nog steeds per browser moeten kijken naar bijvoorbeeld scrollbalken e.d., hoe de betreffende kiosk mode daar mee omgaat. Want het verschil in breedte tussen kiosk en gewoon gemaximaliseerd is slechts een paar pixels natuurlijk.

Inderdaad, wat overigens ook een probleem kan zijn : custom skins voor XP/Vista. Sommige skins zorgen ervoor dat scrollbalken dikker zijn in je browser dan normaal (heb ik hier gehad in Firefox maar niet in IE6). dus ik denk dat je het meer moet basseren op de hoogte dan de breedte. In de hoogte vervallen je taakbalk, toolbars en nog wat menu's allemaal.

[Rekcor]

Ik vind dit een heilloze weg. Een goede webapp heeft geen speciale voorzieningen nodig als e.e.a. in fullscreen draait.

Als je wilt dat je user goed naar fullscreen kan switchen, zou ik gewoon een knop maken: 'show/hide navigation buttons' oid, zodat hij/zij zelf kan bepalen wat hij zit.

[Bosmonster]

BtM909 schreef op maandag 11 februari 2008 @ 11:10:
Tik ff een klein testpaginaatje, dan kunnen we het hier testen mbt andere OS-en en multi-screen

Even wat geknutseld, alleen niet zoveel tijd om het te testen:

http://www.bosmonster.nl/kioskwidth.html

(even F5'en voor nieuwe waarde dus )

Aangezien IE bijvoorbeeld al standaard altijd de scrollbalk aanheeft is daar de clientWidth/scrollWidth al niet altijd volledig. Helaas verschilt de breedte van de scrollbalk ook per instelling en theme en OS.

[ Voor 28% gewijzigd door Bosmonster op 11-02-2008 12:34 ]

[Verwijderd]

update
- window.screen bevat in opera alleen info van scherm 1, in firefox van het scherm waar het venster in zit (het centrum lijkt het).
- in scherm 1 is met beide browsers redelijk failsafe the checken of outerWidth/Height >= screen.width/height. (gaat fout als je het venster met de hand groter trekt dan het scherm, maar daar moet je behoorlijk voor prutsen). De gein dat dit werkt is de taakbalk.
- in IE heb ik nog niet echt iets gevonden (outerWidth ontbreekt)
- safari heeft idd geen fullscreen mode, dus daar hoeft niks te gebeuren

HTML:

<script type="text/javascript">
function checkFullScreen() {
    if (!(window.outerWidth && window.outerHeight)) return 'dunno';
    return ((window.outerWidth>=screen.width) && (window.outerHeight>=screen.height));
}
window.onresize = function() {
    document.getElementById('debug').innerHTML = top.window.outerWidth+'\n'+top.window.outerHeight+'\n'+screen.width+'\n'+screen.height;
    document.getElementById('FSCheck').innerHTML = checkFullScreen();
};
</script>

<p id="FSCheck"></p>
<pre id="debug"></pre>

Overigens: ik heb een knop om toolbars los van de fullscreenmode aan en uit te zetten. Bovendien komt er, als eea werkend te krijgen valt, uiteraard een toggle om dit behaviour aan of uit te zetten. Discussie of dit behaviour al of niet handig is, is wmb ongewenst

[ Voor 4% gewijzigd door Verwijderd op 11-02-2008 13:03 ]