Toile bug de maximisation?

StackOverflow https://stackoverflow.com/questions/2762227

Question

Je tué a dû plus d'une heure sur ce qui me semble comme un comportement étrange qui se passe dans Firefox, Safari et Chrome. Voici un code: 

<!doctype html>
<html>
    <head>
        <title>Watch me grow scrollbars!</title>
    </head>
    <body onload="resizeCanvas()">
        <canvas id="canvas"></canvas>
    </body>
</html>

<script type="application/javascript">
    function resizeCanvas() {
        var canvas = document.getElementById("canvas");
        canvas.setAttribute("height", window.innerHeight);
        canvas.setAttribute("width", window.innerWidth);
    }
</script>

En fait, la toile semble toujours de maximiser « trop », et la fenêtre se développe sur les deux côtés des barres de défilement. Je l'ai essayé d'utiliser différentes façons d'obtenir les dimensions du document, y compris dans une toile de nidification 100% de large et de haut placé de façon absolue div, ainsi que l'extraction des propriétés document.documentElement.clientWidth / hauteur.

Juste pour être sûr que je ne suis pas devenir fou, je l'ai placé une image à la place de la toile, et le tour est joué, le même code a parfaitement fonctionné pour étirer l'image sur les dimensions du document.

Qu'est-ce que je fais mal ici? Je suis trop fatigué pour comprendre. .. .. Doit boire quelque chose.

Était-ce utile?

La solution 2

Je n'ai pas trouvé une solution pour le problème (toujours ouvert aux commentaires) donc pour déborder maintenant je l'ai caché sur l'élément conteneur parent qui a provoqué à peu près ce que je cherchais. Pourtant, il ne peut pas être bon si elle est cette contradiction. À moins que je manque quelque chose ..

Autres conseils

Si vous êtes à la recherche d'un moyen de prolonger la toile pour couvrir la page entière, la meilleure solution que j'ai trouvé est de laisser CSS redimensionne automatiquement à 100%, puis utilisez la taille de l'élément de toile actuelle pour réinitialiser la résolution de la toile. < br> Pour éviter d'avoir des barres de défilement, vous devez également définir la toile position CSS absolue.

(testé avec Chrome 34, Firefox 27, Explorateur 11) 

<!DOCTYPE html>
<html>
    <body onload="resizeCanvas()" style="margin: 0;">
        <canvas id="canvas" style="position: absolute; width: 100%; height: 100%;"></canvas>
    </body>
</html>

<script type="application/javascript">
    function resizeCanvas() {
        var canvas = document.getElementById("canvas");
        canvas.setAttribute("width", canvas.offsetWidth);
        canvas.setAttribute("height", canvas.offsetHeight);

        // We draw a circle, just to test that it works
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.arc(canvas.offsetWidth/2, canvas.offsetHeight/2, canvas.offsetHeight/2,    0, Math.PI*2, true); 
        ctx.closePath();
        ctx.fill();
    }
</script>

Eh bien, cela fonctionne dans Firefox 4, mais je n'ai pas essayé dans d'autres navigateurs parce que je ne les ai pas dans cet ordinateur. 

<!doctype html>
<html>
    <head>
        <title>Watch me grow scrollbars!</title>
<style>
body { margin: 0; padding: 0; }
canvas { width: 100%; height: 100%; border: 0; }
</style>
<script type="text/javascript">
    function resizeCanvas() {
        var canvas = document.getElementById("canvas"),
            ctx = canvas.getContext('2d'),
            height = document.body.clientHeight,
            width = document.body.clientWidth;
        canvas.setAttribute("height", height);
        canvas.setAttribute("width", width);
        ctx.fillStyle = 'rgb(128,128,128)';
        ctx.fillRect(10, 10, width-20, height-20);
    }
</script>
    </head>
    <body onload="resizeCanvas()">
        <canvas id="canvas"></canvas>
    </body>
</html>

En ce qui concerne IE7 (qui ne toile support de toute façon), je devais changer l'attribut de type de votre script de application/javascript à text/javascript pour faire fonctionner le code.

Voici pourquoi: (citant keparo sur Quel est le javascript type MIME pour l'attribut type d'une balise de script )

  

Le type MIME pour javascript n'a pas été   normalisé pendant des années. La neige   officiellement. "application / javascript"

     

Le botteur réel est ici que la plupart   les navigateurs ne seront pas utiliser cet attribut   De toute façon, du moins pas dans le cas de   la balise de script. Ils peek fait   à l'intérieur du paquet et déterminer la   entrez pour eux-mêmes.

     

Ainsi, la ligne de fond est que la   type = "text / javascript" ne fait pas   tout autant que le javascript est   concerné, mais il fait partie de la spécification   pour HTML 4 et XHTML 1.0.

Je ne sais pas si cela signifie encore des versions plus récentes d'IE.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top