JavaScript監聽瀏覽器視窗的變化
阿新 • • 發佈：2021-12-20
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>