javascript - 超过一定宽度阈值时如何刷新页面？

Question

当用户的窗口大小达到 570 像素时，我希望刷新（重新加载）页面。我正在建立一个响应式网站并且需要这样做（我没有时间详细说明原因）。

基本上，我正在寻找的是网页在窗口大小超过 570px 宽度时刷新一次（一次当它变小，一次当它变大）。

我知道这并不理想，应该避免这种情况，但是对于这个特定的站点，它将解决我所有的问题。

Answer 1

我自己不会这样做，但您可以在页面加载（或准备好文档）时使用以下内容：

var threshold = 570;
var initialDiff = ($(window).width() > threshold) ? 1:-1;

$(window).on('resize',function(e){
    var w = $(window).width();
    var currentDiff = w - threshold;
    if(currentDiff*initialDiff < 0) {
        location.reload();
    }
});

这在两个方向上都有效。请参阅此jsFiddle以获取当宽度超过阈值时突出显示指示符 div 的示例。

Answer 2

你可以试试这个：

$(window).resize(function() {
 if($(window).width()>570)
    location.reload();//reload current page
});