JavaScript监听浏览器窗口的变化

 

 

JQuery

$(window).resize(function () {          //当浏览器大小变化时
    alert($(window).height());          //浏览器时下窗口可视区域高度
    alert($(document).height());        //浏览器时下窗口文档的高度
    alert($(document.body).height());   //浏览器时下窗口文档body的高度
    alert($(document.body).outerHeight(true)); //浏览器时下窗口文档body的总高度 包括border padding margin
});

 

 

JavaScript的resize事件

window.addEventListener('load', function() {
    console.log(window.innerWidth);
    
    window.addEventListener('resize', function() {
        console.log(window.innerWidth);
    })

})

 

 

定时器

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div style="width: 2.6rem;height:1.6rem;border: 1px solid black">

</div>
</body>
<script>
  refresh();
  window.onresize = function () {  //监听屏幕的改变
    setTimeout(function () {
      refresh();
    }, 10)
  };

  function refresh() {
    let devicewidth = document.documentElement.clientWidth;
    console.log(devicewidth);
    if (devicewidth > 1200) {
      document.documentElement.style.fontSize = 1200 / 12 + "px"
    } else {
      document.documentElement.style.fontSize = devicewidth / 7.5 + "px"  //设计稿物理分辨率（750）/100
    }
  }
</script>
</html>
复制代码

 

posted @   漫漫长路</>  阅读(2514)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
点击右上角即可分享
微信分享提示