jquery - 计算视口尺寸并使用 Jquery 动态显示

Question

我有这个函数可以随着浏览器窗口大小的变化动态计算视口的宽度和高度。现在我想在屏幕上显示该值，但它不起作用。有任何想法吗？

JS：

<script type="text/javascript">
        var viewportWidth = $(window).width();
        var viewportHeight = $(window).height();
             $('viewport').html(viewportWidth);
             $('viewport').html(viewportHeight);
        $(window).resize(function() {
             $('viewport').html(viewportWidth);
             $('viewport').html(viewportHeight);
        });
</script>

HTML：

<div id="viewport">width and height should be displayed here dynamically</div>

谢谢

Answer 1

问题：

• 您正在使用.html，它会覆盖元素的先前 html。你可以使用.append.

• 您正在使用最初设置的变量，而不是在窗口调整大小时获取新值。

• 你正在使用"viewport"，应该是"#viewport"

• 您还应该确保在代码运行时元素存在，这意味着 dom 准备好处理程序或将脚本元素放在元素之后

尝试这个：

$(document).ready(function() {
    $(window).resize(function() {
        $('#viewport').empty().append($(window).width(), "x", $(window).height())
    }).resize(); //Initial call
});

演示：http: //jsfiddle.net/3Lbb7/2/