Occuper tout l'écran, sans déborder !

Version imprimable

23/10/2018, 10h25
L'AMI Yves

Occuper tout l'écran, sans déborder !

Bonjour à tous.

Pour un besoin particulier, je cherche à faire un site qui s'affichera dans tout l'écran, mais n'en sortira pas : je ne trouve pas le moyen. Mon idée de base est de récupérer les dimensions de l'écran (hauteur et largeur en pixels), puis de me débrouiller avec. Malheureusement, cela ne semble pas possible : toutes les évolution de HTML sont tournées vers le "responsive" - et je comprends que ce soit utile, par exemple pour les pages Google ou Wikipedia - mais il n'y a pas que ça dans la vie (même dans la vie du Web !)

Par exemple, si vous voulez développer un jeu, avec des zones sensibles (au doigt ou à la souris) réparties un peu partout, il n'y a pas intéret à devoir, en plus, jongler avec les ascenseurs. Y a-t-il une solution ? J'ai parcouru deux années de messages sur ce forum : j'ai rien vu.

Alors, merci à qui pourra m'aider.

AMIcalement.
25/10/2018, 14h34
Mr Ananas

Bonjour,

Si l'utilisateur clique sur la coche "plein écran" ton site occupera l'ensemble de son écran.
25/10/2018, 17h10
johnlobs

Bonjour,

Est ce que tu as vu ca?

https://www.developpez.net/forums/d3...aille-d-ecran/

Cordialement,

Salut, je ne comprends pas... Tu ne peux pas utiliser l'api Fullsceen ?

Code:

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
 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        body{
          width:100%;
          height:100%;
         }
         
         #divmonsite{
          width:100vw;
          height:100vh;
          position: absolute;
          left: 0;
          top: 0;
          background-color: gray;
          z-index: 0;
         }
         
         #but{
          width: 100px;
          height: 50px;
          position: absolute;
          top: 10px;
          left: 10px;
          z-index: 1;
         }
    </style>
</head>
<body>
  <div id="divmonsite"></div>
  <input type="button" id="but" value="Fullscreen">
  <script>
    var elem = document.getElementById("divmonsite");
    
    function openFullscreen() {
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.mozRequestFullScreen) { /* Firefox */
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
        elem.webkitRequestFullscreen();
      } else if (elem.msRequestFullscreen) { /* IE/Edge */
        elem.msRequestFullscreen();
      }
    }
    var but=document.getElementById("but");
    but.addEventListener('click',openFullscreen);
  </script>
 
</body>
</html>

https://jsfiddle.net/gp4k90bo/