CSS 不断刷新答案

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

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

http://www.zombiesquirrel.com

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

【问题讨论】：

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

标签： javascript html css

【解决方案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 提出的仅针对移动设备禁用样式表的建议。

【讨论】：