防止移动浏览器无限自动刷新，同时保持响应功能？答案

【问题标题】：Prevent infinite auto-refreshing on mobile browsers while keeping responsive functionality?防止移动浏览器无限自动刷新，同时保持响应功能？
【发布时间】：2014-01-13 16:09:48
【问题描述】：

在发现 javascript 自动刷新脚本时有点超前了..

//refresh page on browser resize
$(window).bind('resize', function(e)
{
  console.log('window resized..');
  this.location.reload(false); /* false to get page from cache */
  /* true to fetch page from server */
});

无论屏幕尺寸如何，我都非常高兴将其用作我的网站自动调整导航栏的一种方式。我的目标主要是让导航栏的菜单图标“浮动在右侧”，但在屏幕上仍然可见，即使在小屏幕上也是如此。而且我知道有更好的方法来解决这个问题，但目前这种方法似乎在我有限的 javascript 知识下效果最好。没有判断力！ :-P

无论如何，这是我的问题。尽管导航栏在刷新时会自行调整大小，但在小屏幕和移动浏览器上，只要用户在网站上向下滑动，它就会刷新页面。大多数平板电脑和智能手机也是如此。

看到我在这里谈论的是我网站的备用链接（更新我的数据库 atm，所以我为可怕的地址号码道歉）

http://69.194.231.142    <---Please copy/paste this address into major/mobile browsers for diagnosis

它在笔记本电脑和大屏幕上运行良好，但在手机或平板电脑上查看此网站时，它会无限刷新或滚动时刷新。

如果有任何方法可以解决这个令人讨厌的代码的小谜团，请告诉我。或者至少，一种更好的编码方式，它只刷新一次，而不是无限期地刷新。我不知道这是否可能，所以欢迎任何替代解决方案。

也许有一种方法可以只刷新构成导航的 CSS 而不是刷新整个页面？无论是那种或者让页面刷新一次的东西都会很棒:-D

谢谢！

【问题讨论】：

我不认为重新加载页面以响应调整大小是一个好计划。在桌面上当用户通过拖动调整大小时会触发多个调整大小事件。 “无论屏幕大小，我很高兴将它用作我的网站自动调整导航栏的一种方式。” - 您是否尝试过通过 CSS 执行此操作以使其发生自动没有任何JS？
你为什么要重新加载？您不必重新加载内容/页面。您应该可以让 CSS 重新布局，或者如果您有一些参与页面加载的 JS，您可以在调整大小时调用该 JS 来重新调整。您不应该重新加载页面。
当“刷新 JS”被禁用时，我开始遇到的问题是导航栏不会自动调整以正确对齐菜单。它似乎总是偏离中心......我尝试使用百分比，但最终它仍然给我带来了问题。如果有人有办法纯粹在 CSS（自动调整大小）中做到这一点，那将有所帮助。我只想拥有它，以便菜单项保持居中，移动按钮保持在右侧，无论浏览器窗口大小如何，都不会被剪裁。

标签： javascript html css mobile refresh

【解决方案1】：

我找到了解决办法！

看来我的浏览器使用的是cdn。所以我不得不刷新服务器上的缓存以查看更改。删除了 JS 刷新脚本并修复了在移动视图中将导航栏设置为“相对”的问题。这样我就不用担心间距了！它最初是从其他使导航栏变粘的 javascript 中删除的，但该脚本还使导航栏粘在移动视图上，这弄乱了我的布局并导致滚动时出现很多延迟。

修复这些小问题对我的网站可用性产生了很大影响。现在无需担心刷新问题，页面在多个屏幕上保持居中。

感谢所有建议删除 JS 的人，使用 CSS 只是一种魅力！

【讨论】：