Geek asks and answers

Window.innerWidth = 0?

I am making a canvas web page for animation. The strange thing is that every time I launch a web page from a double click on an html file, the canvas will almost always change incorrectly. I posed a similar question before: Invalid canvas size on boot , but does not have the desired answer.

After extensive debugging, I find out what it window.innerWidthis that gives me such a problem. window.innerWidthreturns 0 every time the page is launched by double-clicking on the html file and leads to an incorrect canvas size (interestingly, the canvas size is not exactly 0, but very small, which has an object for rendering the stack on top of each other), but after reloading the page (Ctrl + R) the problem no longer occurs. I am using jQuery to load a page, here is my code:

HTML:

    <body>
        <canvas id="main_canvas"></canvas>
    </body>

JS:

    $(document).ready(function() {

        var SCREEN_WIDTH = window.innerWidth-10,
            SCREEN_HEIGHT = window.innerHeight-10;

        if (window.innerWidth === 0) { alert("wtf? width = 0?");}

        var canvas = $('canvas')[0],
            context;

        init(); // use $(window).load(init) does not fix the problem

        function init() {

            if (canvas.getContext) {

                context = canvas.getContext('2d');
        animate(); // draw stuff
            }

            else {
                alert('Your browser does not support html5 canvas');
            }
        }
});

, $(docuemnt).ready(function()), , , http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/ , HTML-, DOM , .

, $(window).load(function()) , , , . , , . , .

, js , . - ?

+5
2

window.outerWidth, 0 ready(), screen.width. , , screen.availWidth .

-1

, . , - , , . , .

window.addEventListener( 'resize', onWindowResize, false ); 
function onWindowResize() {
    windowX = window.innerWidth;
    windowY = window.innerHeight;
}
+3

More articles:


All Articles