窗口.内部宽度 = 0

window.innerWidth = 0?

本文关键字：内部 窗口      更新时间：2024-06-04

我正在为动画制作一个画布网页。奇怪的是，每次我通过双击html文件启动网页时，画布几乎总是大小不正确。我之前发布过类似的问题：加载时画布大小不正确，但没有想要的答案。

经过广泛的调试，我发现是window.innerWidth给我带来了这样的麻烦。每次通过双击 html 文件启动页面时，window.innerWidth都会返回 0，并导致不正确的画布大小(有趣的是，画布大小并不完全是 0，而是一个非常小的画布大小，它有对象要堆叠在彼此之上(，但在重新加载页面 (Ctrl+R( 后，问题不再发生。我正在使用jQuery来加载页面，这是我的代码：

.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 文件在加载之前会询问窗口的宽度，但我找不到可行的解决方案。谁能帮忙？

使用在

窗口大小调整时触发的事件侦听器。这样，您就不必在尝试查找窗口何时完全初始化时做任何废话。它还会让你减少对状态的依赖，这是一个很好的奖励。

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

我对window.outerWidth有一个类似的问题，当从ready((方法调用时，它在某些浏览器上返回0，我改用screen.width解决了它。我没有测试它，但我认为screen.availWidth可以解决您的问题。

相关文章：