html页面的代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><title>浏览器窗口大小</title>
</head>
<body><div id="sizeInfo"></div>
</body>
</html>
JavaScript的代码
$(document).ready(function() { function updateWindowSize() { var width = $(window).width(); var height = $(window).height(); $('#sizeInfo').text('Width: ' + width + 'px, Height: ' + height + 'px'); } // 初始化时调用一次以显示初始大小 updateWindowSize(); // 监听窗口大小变化事件 $(window).resize(updateWindowSize);
});
注意:我用的是jQuery,所以一定要加上
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>