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

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

JS:

var viewportWidth=$（窗口）.width（）；
var viewportHeight=$（窗口）.height（）；
$（'viewport'）.html（viewportWidth）；
$（'viewport'）.html（viewportHeight）；
$（窗口）。调整大小（函数（）{
$（'viewport'）.html（viewportWidth）；
$（'viewport'）.html（viewportHeight）；
});

HTML:

此处应动态显示宽度和高度

谢谢您

问题：

• 您使用的是

  .html

  ，它将覆盖元素以前的html。您可以使用

  .append

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

• 您使用的是

  “viewport”

  ，它应该是

  “#viewport”

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

试试这个：

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

演示：

问题：

• 您使用的是

  .html

  ，它将覆盖元素以前的html。您可以使用

  .append

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

• 您使用的是

  “viewport”

  ，它应该是

  “#viewport”

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

试试这个：

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

---

演示：

您是否检查了Firefox、Chrome或Safari中的错误控制台？可能发生了错误消息。另一个问题是，我错过了事件“onResize”，因此读取和写入值将被更新。您是否检查了Firefox、Chrome或Safari中的错误控制台？可能发生了错误消息。另一个是，我错过了事件“onResize”，因此读取和写入值将被更新。非常感谢！。真不敢相信我错过了#…谢谢，这太完美了，真的很感激。这个.empty（）函数在这里到底做了什么？它在附加到它之前会清除以前的内容，请参阅@DextrousDave。你也可以使用

.html（$（window.width（）+“x”+$（window.height（））

而不是

.empty（）.append（…）

，不知道为什么我没早点想到哪个更好，还是颜色和颜色？非常感谢！。真不敢相信我错过了#…谢谢，这太完美了，真的很感激。这个.empty（）函数在这里到底做了什么？它在附加到它之前会清除以前的内容，请参阅@DextrousDave。你也可以使用

.html（$（window.width（）+“x”+$（window.height（））

而不是

.empty（）.append（…）

，不知道为什么我没早点想到哪个更好，还是颜色和颜色？

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