Tijden veranderen
Fullscreen
Inmiddels gebruikt geen enkele klant nog een oude browser.
En volgens https://caniuse.com/fullscreen ondersteunt iedere browser gewoon de JS fullscreen API.
Nou zit ik er over te denken om de library te vervangen voor een paar simpele JS statements van de standaard API.
Wat is jullie ervaring, gebruiken jullie voor een fullscreen knop op je site of PWA ook een aparte library?
Of heb je die tegenwoordig niet meer nodig als je volgens de specificaties werkt?
De gebruiker kan zelf ook op F11 duwen en bij een video heb je ook een vierkaantje om volscherm te gaan.
Jan R op 24/06/2023 18:09:37:
Nog nooit gebruikt maar zou de vraag niet moeten zijn: heeft dit een meerwaarde?
Dat kan het zeker hebben, afhankelijk van het soort website.
Jan R op 24/06/2023 18:09:37:
De gebruiker kan zelf ook op F11 duwen en bij een video heb je ook een vierkaantje om volscherm te gaan.
Dat kan, maar een knop kan het makkelijker maken. Dan hoef je niet uit te wijken naar je toetsenbord. En ... waar zit die F11 op je mobiel?
Ad Fundum op 23/06/2023 16:16:19:
En volgens https://caniuse.com/fullscreen ondersteunt iedere browser gewoon de JS fullscreen API.
Nou zit ik er over te denken om de library te vervangen voor een paar simpele JS statements van de standaard API.
Wat is jullie ervaring, gebruiken jullie voor een fullscreen knop op je site of PWA ook een aparte library?
Of heb je die tegenwoordig niet meer nodig als je volgens de specificaties werkt?
Nou zit ik er over te denken om de library te vervangen voor een paar simpele JS statements van de standaard API.
Wat is jullie ervaring, gebruiken jullie voor een fullscreen knop op je site of PWA ook een aparte library?
Of heb je die tegenwoordig niet meer nodig als je volgens de specificaties werkt?
Ik zou het gewoon even testen. Als je het kunt oplossen zonder library, dan is het prima toch?
Zelf testen kan altijd, ik geloof dat het tegenwoordig mogelijk is om Edge te installeren op Debian. Ik dacht alleen sneller klaar te zijn op PHPHulp. Zodra ik getest heb meld ik het terug.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fullscreen Test</title>
<style type="text/css">
body {
display: flex;
align-items: center;
justify-content: center;
font: 14px Verdana;
height: 100vh;
}
.container {
max-width: 640px;
padding: 20px;
border: 1px solid hsla(0, 100%, 0%, 0.5);
border-radius: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Fullscreen Test</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<button id="fullscreen">Go fullscreen</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
let btn_fullscreen = document.getElementById('fullscreen');
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else if (document.exitFullscreen) {
document.exitFullscreen();
}
}
btn_fullscreen.addEventListener('click', e => {
toggleFullScreen();
});
});
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fullscreen Test</title>
<style type="text/css">
body {
display: flex;
align-items: center;
justify-content: center;
font: 14px Verdana;
height: 100vh;
}
.container {
max-width: 640px;
padding: 20px;
border: 1px solid hsla(0, 100%, 0%, 0.5);
border-radius: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Fullscreen Test</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<button id="fullscreen">Go fullscreen</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
let btn_fullscreen = document.getElementById('fullscreen');
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else if (document.exitFullscreen) {
document.exitFullscreen();
}
}
btn_fullscreen.addEventListener('click', e => {
toggleFullScreen();
});
});
</script>
</body>
</html>
Edit:
en werkt ook op Safari 16.5, maar Chrome geeft standaard een message "Press [esc] to exit Fullscreen". Safari doet dat niet, dus ik zou gewoon de buttontekst togglen of zoiets.
Gewijzigd op 25/06/2023 20:01:05 door Jan Koehoorn
Dat scheelt dan weer een paar honder regels JS!
Dit topic is gesloten.