Toile plein écran pour Chrome?

Question

J'essaie de faire un canevas en plein écran sur Google Chrome.

<style> 
#canvas:-webkit-full-screen { 
    height:100%; 
    width: 100%; 
}  
</style> 
<button onclick="fullScreen()">Full Screen</button> 
<canvas id="canvas"></canvas> 
<script> 
    function fullScreen() { 
     var c = document.getElementById("canvas"); 
     c.webkitRequestFullScreen(); 
    } 
</script> 

Ce code rend la toile en plein écran, mais seule la hauteur est en plein écran.

Answer 1

Essayez d'utiliser la règle CSS fixed pour position avec l'élément de toile:

position:fixed; 
left:0; 
top:0; 
width:100%; 
height:100%; 

Vous pourriez avoir besoin de mettre html et body avec largeur/hauteur: 100% aussi bien.

Si vous voulez éviter le zoom car cela vous donnera, vous devrez définir directement la largeur et la hauteur de l'élément de canevas (utilisez window.innerHeight et .innerWidth).