C'è un modo per rilevare in modo affidabile se un browser è in esecuzione in modalità a schermo intero? Sono abbastanza sicuro che non ci sia alcuna API del browser che posso interrogare, ma qualcuno ha elaborato ispezionando e confrontando determinate misurazioni di altezza/larghezza esposte dal DOM? Anche se funziona solo per determinati browser, sono interessato a sentirlo.Rilevare se un browser è in modalità schermo intero
Che dire di determinare la distanza tra la larghezza della finestra e la larghezza della risoluzione e allo stesso modo dell'altezza. Se si tratta di una piccola quantità di pixel (soprattutto per l'altezza) è potrebbe essere essere a schermo intero.
Tuttavia, questo non sarà mai affidabile.
Se il browser è effettivamente in esecuzione a schermo intero, la differenza tra la dimensione del viewport e la risoluzione dovrebbe essere uguale a 0. A meno che non si utilizzino più monitor, credo. –
Le barre di scorrimento sono contate come parte del viewport? –
Non sono sicuro - dovrai sperimentare. – alex
Opera tratta a schermo intero come un diverso tipo di supporto CSS. Lo chiamano Opera Show, e si può controllare da soli con facilità:
@media projection {
/* these rules only apply in full screen mode */
}
In combinazione con [email protected], ho personalmente trovato estremamente utile.
Questo funziona per tutti i nuovi browser:
if (!window.screenTop && !window.screenY) {
alert('Browser is in fullscreen');
}
Sfortunatamente, questo test è diventato inaffidabile. –
Sembra funzionare: if (screen.height === window.outerHeight) { alert ('Browser is fullscreen'); } –
No, la seconda soluzione non funziona in Chrome 23, quando Fullscreen tramite API è attiva, ma l'utente la spegne con Ctrl + alt + F. – Ruben
Chrome 15, Firefox 10, e Safari 5.1 ora fornire le API per attivare a livello di codice in modalità a schermo intero. La modalità a schermo intero attivata in questo modo fornisce eventi per rilevare le modifiche a schermo intero e le pseudo-classi CSS per lo stile di elementi a schermo intero.
Vedere this hacks.mozilla.org blog post per dettagli.
Tuttavia, esiste un modo per rilevare l'utente inserito a schermo intero utilizzando i mezzi forniti dal browser (come F11 o il menu accanto a Zoom in Chrome)? – Suma
Firefox 3+ fornisce una proprietà non standard sull'oggetto window che segnala se il browser è in modalità schermo intero o meno: window.fullScreen.
Bello! Funziona in modo affidabile in Firefox. Questo è sicuramente un pezzo della soluzione. –
Per Safari su iOS può usare:
if (window.navigator.standalone) {
alert("Full Screen");
}
In Chrome almeno:
onkeydown può essere utilizzato per rilevare il tasto F11 viene premuto per entrare a schermo intero. onkeyup può essere utilizzato per rilevare il tasto F11 premuto per uscire a schermo intero.
Usa che in combinazione con il controllo per keyCode == 122
La parte difficile sarebbe quella di dire al keydown/non keyup ad eseguire il suo codice se l'altro ha appena fatto.
Questo non aiuta se l'utente è entrato a pieno schermo con F11 prima di navigare nella pagina web che esegue quel javascript. –
C'è la mia NON cross-browser variante:
<!DOCTYPE html>
<html>
<head>
<title>Fullscreen</title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
var fullscreen = $(window).height() + 1 >= screen.height;
$(window).on('resize', function() {
if (!fullscreen) {
setTimeout(function(heightStamp) {
if (!fullscreen && $(window).height() === heightStamp && heightStamp + 1 >= screen.height) {
fullscreen = true;
$('body').prepend("<div>" + $(window).height() + " | " + screen.height + " | fullscreen ON</div>");
}
}, 500, $(window).height());
} else {
setTimeout(function(heightStamp) {
if (fullscreen && $(window).height() === heightStamp && heightStamp + 1 < screen.height) {
fullscreen = false;
$('body').prepend("<div>" + $(window).height() + " | " + screen.height + " | fullscreen OFF</div>");
}
}, 500, $(window).height());
}
});
</script>
</body>
</html>
Testato su:
Kubuntu 13.10:
Firefox 27 (<!DOCTYPE html> è richiesto, script funziona correttamente con dual-monitor), Chrome 33, Rekonq - pass
Win 7:
Firefox 27, Chrome 33, Opera 12, Opera 20, IE 10 - pass
IE 10 - fail
Diritto. Completamente in ritardo su questo ...
A partire dal 25 novembre 2014 (Tempo di scrittura), è possibile che gli elementi richiedano l'accesso a tutto schermo e successivamente controllino l'entrata e l'uscita dalla modalità a schermo intero.
MDN Spiegazione qui: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
spiegazione Semplice da David Walsh: http://davidwalsh.name/fullscreen
Ho pensato di aggiungere la mia thruppence a salvare nessuno sbattere la testa. La prima risposta è eccellente se si ha il controllo completo sul processo, cioè si avvia il processo a schermo intero nel codice. Inutile che qualcuno lo faccia colpire F11.
Il barlume di speranza all'orizzonte si presenta sotto forma di questa raccomandazione W3C http://www.w3.org/TR/view-mode/ che consentirà il rilevamento di finestre, flottanti (senza chrome), ingrandite, ridotte a icona e schermo intero tramite media query (che ovviamente significa window.matchMedia e associata).
Ho visto segni che è nel processo di implementazione con prefissi -webkit e -moz ma non sembra essere ancora in produzione.
Quindi no, nessuna soluzione, ma spero che salverò qualcuno che corre molto prima di colpire lo stesso muro.
PS *: - moz-full-screen fa anche doo-dah, ma è bello sapere.
La mia soluzione è:
var fullscreenCount = 0;
var changeHandler = function() {
fullscreenCount ++;
if(fullscreenCount % 2 === 0)
{
console.log('fullscreen exit');
}
else
{
console.log('fullscreened');
}
}
document.addEventListener("fullscreenchange", changeHandler, false);
document.addEventListener("webkitfullscreenchange", changeHandler, false);
document.addEventListener("mozfullscreenchange", changeHandler, false);
document.addEventListener("MSFullscreenChanges", changeHandler, false);
utente window.innerHeight e screen.availHeight. Anche le larghezze
window.onresize = function(event) {
if (window.outerWidth === screen.availWidth && window.outerHeight === screen.availHeight) {
console.log("This is your MOMENT of fullscreen: " + Date());
}
È possibile verificare se document.fullscreenElement non è nullo per determinare se la modalità a schermo intero è attiva. Avrai bisogno di prefisso fornitore fullscreenElement di conseguenza. Vorrei usare qualcosa di simile:
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement ||
document.webkitFullscreenElement || document.msFullscreenElement;
https://msdn.microsoft.com/en-us/library/dn312066(v=vs.85).aspx ha un buon esempio per questo che cito di seguito:
document.addEventListener("fullscreenChange", function() {
if (fullscreenElement != null) {
console.info("Went full screen");
} else {
console.info("Exited full screen");
}
});
Questa è la soluzione che sono venuto per ... ho scritto come un modulo es6 ma il codice dovrebbe essere piuttosto semplice.
/**
* Created by sam on 9/9/16.
*/
import $ from "jquery"
function isFullScreenWebkit(){
return $("*:-webkit-full-screen").length > 0;
}
function isFullScreenMozilla(){
return $("*:-moz-full-screen").length > 0;
}
function isFullScreenMicrosoft(){
return $("*:-ms-fullscreen").length > 0;
}
function isFullScreen(){
// Fastist way
var result =
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement;
if(result) return true;
// A fallback
try{
return isFullScreenMicrosoft();
}catch(ex){}
try{
return isFullScreenMozilla();
}catch(ex){}
try{
return isFullScreenWebkit();
}catch(ex){}
console.log("This browser is not supported, sorry!");
return false;
}
window.isFullScreen = isFullScreen;
export default isFullScreen;
Perché è necessario rilevare questo? Forse c'è un'altra soluzione al tuo problema? – Marc
Quando il browser è in modalità a schermo intero non c'è modo di vedere l'ora riportata dal sistema operativo (ad esempio nell'orologio nell'area di notifica della barra delle applicazioni su Windows).Essere in grado di vedere l'ora corrente può essere importante per gli utenti della nostra applicazione Web, quindi vorremmo essere in grado di visualizzare un orologio quando il browser è completamente schermata. Lo schermo immobiliare è un vantaggio quando la nostra applicazione viene eseguita a risoluzioni inferiori come 1024 * 768, quindi vorremmo visualizzare l'orologio solo quando il browser è completamente schermata, se possibile. –
Cosa succede se normalmente non hanno un orologio sul desktop e non usano il browser a schermo intero? Sei sicuro di essere il responsabile per loro conoscendo l'ora corrente? –