Javascript 如何在浏览器调整大小时刷新屏幕？

是否可以在浏览器大小更改时刷新页面？我使用一些样式在页面上创建区域，如果浏览器缩小，则布局中断

---

也许我可以用jQuery检测文档大小的变化？

您可以监听一个onresize事件：

---

如果您正在寻找jQuery解决方案，可以使用以下方法：

$(window).bind('resize', function() {
     location.reload();
});

var w = $(window).width();
var h = $(window).height();
var threshold = 100
$(window).resize(function(){
    widthDiff = Math.abs($(window).width()-w);
    heightDiff = Math.abs($(window).height()-h);
    if (widthDiff < threshold && heightDiff < threshold) return;
    w = $(window).width();
    h = $(window).height();

    $(window).resize(function(){
        location.reload();
    });
});

---

对于现在查看此内容的任何人，可能还需要额外使用超时…

更新。JQuery现在认为bind是一个不推荐使用的函数

而proximus的响应方式（至少在Opera/Chrome/Firefox中是如此）则会不断轮询是否需要调整大小，即使浏览器只是坐在那里。似乎resize函数在命中location.reload（）时被自动调用，导致它命中无限循环。这就是我所做的，也解决了这个问题

jQuery(function($){
  var windowWidth = $(window).width();
  var windowHeight = $(window).height();

  $(window).resize(function() {
    if(windowWidth != $(window).width() || windowHeight != $(window).height()) {
      location.reload();
      return;
    }
  });
});

---

这是一个纯JS解决方案，因为我认为对所有内容使用jQuery是不公平的

window.addEventListener('resize', function () { 
    "use strict";
    window.location.reload(); 
});

一个缺点是，它在9岁以上的IE“浏览器”中无法工作。

只需使用此代码即可

$(window).resize( function() {

window.location.href = window.location.href;

});

希望它有用

$(window).resize( function() {

window.location.href = window.location.href;

});

---

这个对我有用

如果有人拖动窗口来调整大小，则会出现问题-调整大小的事件太多

最好使用定时器来清理：

$(window).on('resize', function () {

    if (timeoutId) {
        clearTimeout(timeoutId);
    }

    timeoutId = setTimeout(function () {
        location.reload();
    }, 500);
});

---

简单。这不会触发多个事件，而是每x秒触发一个事件。被接受的答案将引发太多事件

var resizeTimeout;
window.addEventListener('resize', function(event) {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(function(){
    window.location.reload();
  }, 1500);
});

---

对于jQuery，请用

$（窗口）替换
窗口。addEventListener（'resize'
）。resize

上述解决方案适用于大多数情况。移动设备（如平板电脑或手机）上的Safari当用户开始滚动时，分辨率会略有改变。这会导致页面无法使用，因为当用户开始滚动时，站点会重新设置。 要避免此情况，请在

px

中设置

阈值。如果浏览器的大小超过此
阈值，则页面将重新加载。jQuery解决方案可能如下所示：

$(window).bind('resize', function() {
     location.reload();
});

var w = $(window).width();
var h = $(window).height();
var threshold = 100
$(window).resize(function(){
    widthDiff = Math.abs($(window).width()-w);
    heightDiff = Math.abs($(window).height()-h);
    if (widthDiff < threshold && heightDiff < threshold) return;
    w = $(window).width();
    h = $(window).height();

    $(window).resize(function(){
        location.reload();
    });
});

var w=$（窗口）.width（）；
var h=$（window.height（）；
var阈值=100
$（窗口）。调整大小（函数（）{
widthDiff=Math.abs（$（窗口）.width（）-w）；
heightDiff=Math.abs（$（窗口）.height（）-h）；
如果（宽度差<阈值和高度差<阈值）返回；
w=$（窗口）.width（）；
h=$（窗口）.height（）；
$（窗口）。调整大小（函数（）{
location.reload（）；
});
});
magic jQuery…，或者可能带有DOM事件？当您说“如果浏览器缩小”时，您的意思是用户调整浏览器窗口的大小还是用户缩小（Ctrl-或Cmd-）？完全不同的情况。#检查我的答案：完美且经过测试：在这种情况下，这并不重要，因为它只会在第一次调用resize时重新加载页面。当您实际运行resize代码时，请使用超时，WebKit或IE可能会重复数百次，他们会在打开窗口时多次触发该事件s正在调整大小。如果您希望用户能够拖动窗口的一角，这是一个重要的问题，并且应该更高。当我使用此脚本时，每次在移动设备上滚动浏览器时，都会重新加载，有没有想过如何解决此问题？@HeatherNew可能会查看
窗口。matchMedia
以避免在移动设备上运行它。Pro:it没有JQuery也可以工作