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

Question

我在重新加载页面时遇到问题，我正在使用 RWD 和针对桌面和 tablet/mobile 布局的媒体查询编写网站。我有一页使用 google 地图。如果我的客户将 window 从桌面大小调整为移动大小，他希望我刷新页面（我试图告诉他这是一个相当愚蠢的想法，但他没有听）。桌面显示所有带标记的地图，但平板电脑和移动布局不同，我使用 accordion/list 显示国家列表。当您单击手风琴中的一个元素时，他会展开并显示来自 google 地图 window 信息框的信息。问题是当我只使用媒体查询当然它改变布局但手风琴上的所有元素都被展开，但它必须隐藏并且只有当你点击它们才会展开，如果我刷新页面一切正常，问题是调整页面大小.我尝试使用 window.resize(function(){location reload});它与调整大小完美配合，但在移动设备上，每次触摸都会发出响亮的声音。所以我想写一个函数，只有当 window 大小从 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();
 }
}
}

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

reload web page only when size of page change

html

javascript

css

jquery

reload