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

【问题标题】：How to refresh a page when crossing a certain width threshold?超过一定宽度阈值时如何刷新页面？
【发布时间】：2013-07-21 11:55:37
【问题描述】：

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

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

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

【问题讨论】：

为什么需要重新加载页面？是内容改变还是只是布局？在这种情况下，为什么不设置 display:none;到必须消失的内容？
它与内容无关，CSS 无法解决问题。就像我说的，这可能不是最好的方法，但对于这个特定的构建，这样做可以节省我很多时间。

标签： javascript jquery responsive-design refresh window-resize

【解决方案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 突出显示的示例。

【讨论】：

像魅力一样工作！谢谢！到目前为止，刷新屏幕大小调整的最佳解决方案通过了某个媒体查询。

【解决方案2】：

你可以试试这个：

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

【讨论】：