这是一个奇怪的问题。我正在这里开发一个响应式网站：
http://74.209.178.54:3000/index.html
目前已经构建了三个页面：主页、“为什么”页面和“定价”页面。主页和原因页面在我的 iPhone 4 上很好。“定价”页面真的很模糊。而且我的意思不仅仅是图像模糊 - 绝对一切都是模糊的：文本、边框、背景......
有人见过这个吗？你知道发生了什么吗？
【问题讨论】：
标签： iphone css mobile responsive-design
您的 CSS 中的这段代码导致了问题：-
#logos, #seen {
border: 1px solid #bbbbbb;
（根据 cmets 在第 909 行或第 751 行附近。）
如您所见，定价页面上使用了#logos，并且赋予它的边框在所有边上 - 页面宽度增加了 2 像素。然后 iPhone 在打开时会放大整个页面并出现页面模糊的情况。
我很确定你知道该怎么做，但这里是 :-
#logos, #seen {
border-top: 1px solid #bbbbbb;
border-bottom: 1px solid #bbbbbb;
我还没有在视网膜显示屏 iPhone 上实际测试过这个，但它应该可以工作。
【讨论】：
问题是 iPhone 4 的视网膜显示。我在加载 2 个按钮时遇到了类似的问题，它们在 iPhone 4 上看起来很模糊（比您的网站要多得多），但在我的 3gs（以及您的页面）上看起来很棒)。我不知道您需要做什么才能在您的网站上支持 iPhone 4 Retina 显示屏，但我将解释在 Xcode 中编程时的工作原理：
如果您想支持 Retina 和非 Retina 设备，您必须拥有相同图像的 2 个版本。我建议您首先创建视网膜图像，因为它更容易缩小（在 Mac App Store 中搜索“resizer”）。那么，视网膜图像必须命名为：yourimagename@2x.format。您的非视网膜图像，例如：yourimagename.format。然后，在你的项目中添加这两个图像，当你想加载它时，加载非视网膜版本。如果应用在 Retina 设备上运行，程序将加载 Retina 图像。
造成这种模糊效果的原因是文本是在视网膜中渲染的，而图像不是。不是图片的问题，只是图片分辨率的问题。视网膜图像的大小（宽度和高度）是非视网膜图像的 2 倍，因此非视网膜是视网膜的一半。起初可能看起来有点混乱，但你会发现它根本不是。
希望我能帮到你。如果您需要更多帮助，尽管问！
【讨论】：
问题神秘地消失了——我不知道到底发生了什么。问题消失后，回答问题的人看到了该网站。
【讨论】：