CSS 不断刷新

Posted

技术标签:

【中文标题】CSS 不断刷新【英文标题】:CSS Constantly Refreshing 【发布时间】:2012-08-11 22:06:33 【问题描述】:

我的网站在桌面浏览器上运行良好,但在移动设备(iosandroid 等)上,它会在我放大或缩小时重新加载背景并似乎刷新整个页面。我想知道可能是什么原因造成的,但到目前为止,我一直无法找到问题的原因。它使移动浏览非常烦人。

http://www.zombiesquirrel.com

所有的 CSS 和 javascript 文件都应该链接到我页面的源代码中。什么可能导致此问题?

【问题讨论】:

你有一个错误 touchwipe 可能是问题所在......另外,当你打开 devtools 时,Chrome 上发生了一些事情,滑块会疯狂几秒钟。 我在打开 Chrome devtools 时没有遇到这种情况,但我知道 touchwipe 有错误。我不太确定错误是什么,但如果它可能导致问题,我会进一步挖掘。 啊,我修复了touchwipe 问题,这是一个简单的修复。看起来我的朋友可能刚刚删除了指向 JS 文件的链接...话虽如此,它并没有解决问题,但感谢您提出它,因为它让我重新审视它。 【参考方案1】:

刚刚在我的 iPhone 上查看过,我明白你在说什么,但是我没有看到页面会自行重新加载,它可能只是重新加载 CSS 以适应新的大小。

如果您想实现轻松的移动查看,您应该创建一个移动样式表并使用 javascript 和 php 来更改 css 样式表。

【讨论】:

一旦我找到导致问题的样式表,我就根据您的建议将其排除在移动设备上。如我发布的答案所示,我使用了以下行。 <link rel='stylesheet' href='/z/styles/main-style.css' media='screen and (min-device-width:770px)'> 是的,谢谢,不过我不得不等待一天才能接受自己的回答。【参考方案2】:

我能够解决问题。问题出在以下 CSS 中:

body

    background-color:black;



div.back3


background-image:url("back.png");
position:fixed;
z-index:-1;
margin-left:-2%;
margin-top:-100%;
padding:0;
height:400%;
width:104%;
 

div.back2


background-image:url("back.png");
background-position:250px 250px;
position:fixed;
z-index:-1;
margin-left:-2%;
margin-top:-28%;
padding:0;
height:400%;
width:104%;


div.main

position:static;

我不确定究竟是哪一部分导致了问题,我会做更多的挖掘工作,但现在我只是使用以下内容来指定这个 CSS 样式表只能在非移动设备上使用:

<link rel='stylesheet' href='/z/styles/main-style.css' media='screen and (min-device-width:770px)'>

min-device-width 属性设置为一个高数字,以确保 iPad 也不使用此样式表(尽管如果机器接近 iPad 尺寸,我可能会遇到问题,但此样式表不是无论如何,这对我的网站运营来说不是超级关键)。

谢谢! 编辑:特别感谢 Andrew Manson 提出的仅针对移动设备禁用样式表的建议。

【讨论】:

以上是关于CSS 不断刷新的主要内容,如果未能解决你的问题,请参考以下文章

Jfreechart - 根据不断变化的数据刷新图表

win10不断刷新桌面,怎么办?一直在刷新,任务栏与桌面都点不了!

Android 列表(ListViewRecyclerView)不断刷新最佳实践

自动刷新 CSS文件

Wordpress 会话不断刷新不一致

页面使用 VueJS 不断刷新