在窗口调整大小期间获取元素大小失败

时间:2014-09-25 14:30:25

标签: javascript jquery css

我有一些代码可以在窗口调整大小事件期间在屏幕上获取正文的大小,并在其他地方使用它,但是由于某种原因,确定的大小始终是调整大小之前的大小:

$(document).on('ready', function () {
    initResize();
});

function initResize() {
    $(window).on('resize', doResize).trigger('resize');
};

function doResize() {
    var wh = $('.game').height();
    var ww = $('.game').width();
    console.log("game " + ww +"x" +wh);
}

并且控制台输出总是返回相同的数据,但如果我将选择器更改为$(窗口),它会随着窗口调整大小而改变。有人可以帮忙吗?

html非常简单:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="assets/css/myStyle.css"  /
    <script type="text/javascript" src="assets/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="assets/js/init.js"></script>
</head>

<body>
<section class="game">
</section>
</body>
</html>

和css:

@charset "utf-8";


* {
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
}

html {
    font-size: 62.5%;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

0 个答案:

没有答案