仅在页面大小更改时才重新加载网页

Question

我在重新加载页面时遇到问题，我使用RWD和台式机和平板电脑/移动版式的媒体查询编写网站。 而且我有一页使用Google地图。 如果客户将窗口的大小从桌面大小调整为移动设备，我的客户希望我刷新页面（我试图告诉他这是一个愚蠢的主意，但他没有听）。 桌面显示所有带有标记的地图，但对于平板电脑和移动版面而言，有所不同，我使用手风琴/列表显示国家/地区列表。 当您单击一种元素形式的手风琴时，他会展开显示来自Google Maps windowinfobox的信息。 问题是当我只使用课程的媒体查询时，它会更改布局，但是手风琴上的所有元素都已展开，但是必须隐藏起来，并且只有单击后它们才能展开，如果我刷新页面，一切正常，则问题在于调整页面大小。 我尝试使用window.resize（function（）{location reload}）; 并且可以完美地与调整大小配合使用，但是在移动设备上，每次触摸都会引起混乱。 所以我想编写一个仅当窗口大小从xxx变为yyy时才重新加载页面的函数，如果它们越过边框1024px。，因为这样我的手风琴将完美显示。

Answer 1

我假设这就是您想要的。

$(function(){
 var width = $(window).width();
 var screen = "";
 if(width < 1024 && width >640){
  screen = "small";
 } else if(width>1024) { screen = "big"; }
 $(window).resize(function(){
  var cur_width = $(window).width();
  if(cur_width<1024 && cur_width>640 && screen == "big"){
   location.reload(); 
  } else if(cur_width >1024 && screen == "small"){
   location.reload();
 }
}
}