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 ready handler或将script元素放在元素之后

试试这个：

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

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

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

1 个答案: