JavaScript監聽瀏覽器窗口的變化

本文轉載自查看原文 2021-12-20 14:35 2132 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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 監聽瀏覽器窗口的變化用jQuery監聽瀏覽器窗口的變化監聽瀏覽器窗口變化 vue.js監聽瀏覽器窗口寬度變化 vue監聽瀏覽器窗口大小變化 vue監聽瀏覽器窗口的變化，隨着窗口變化調整里面table的寬高 javascript監聽瀏覽器窗口切換 js檢測瀏覽器窗口變化 vue項目監聽瀏覽器窗口大小發生變化觸發事件 vue項目監聽瀏覽器窗口大小發生變化觸發事件