Question

我有重新加载页面的问题，我使用RWD编写网站和桌面和平板/移动布局的媒体查询。我有一个页面，我使用谷歌地图。我的客户希望我刷新页面，如果他将窗口从桌面大小调整到移动（我试图告诉他这是相当愚蠢的想法，但他没有听）。桌面显示所有带标记的地图，但对于平板电脑和移动布局不同，我使用accordion / list显示国家列表。当你点击一个元素形式手风琴时，他展开显示来自谷歌地图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();
 }
}
}

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

1 个答案: