Question

这是一个奇怪的。我在这里开发一个响应式网站：

http://74.209.178.54:3000/index.html

目前已构建三个页面：主页，“为什么”页面和“定价”页面。 Home和Why页面在我的iPhone 4上运行良好。“定价”页面非常模糊。我并不仅仅意味着图像模糊 - 绝对一切都模糊：文字，边框，背景......

有没有人见过这个？你知道发生了什么吗？

Answer 1

CSS中的此代码导致问题： -

#logos, #seen {
   border: 1px solid #bbbbbb;

（根据评论在第909或751行附近。）

正如您所看到的#logos正在定价页面上使用赋予它的边界在所有边上 - 页面宽度增加2px。然后iPhone在打开时放大整个页面，发生模糊的页面内容。

我很确定你知道该怎么做但是这里有： -

#logos, #seen {
   border-top: 1px solid #bbbbbb;
   border-bottom: 1px solid #bbbbbb;

我还没有在视网膜显示屏iPhone上测试过它，但它应该有用。

Answer 2

问题是iPhone 4的视网膜显示屏。我在加载2个按钮时遇到了类似的问题，它们在iPhone 4上显得模糊（远远超过你的网站），但在我的3gs（以及你的页面）看起来很棒）。我不知道你需要做些什么来支持你的网站上的iPhone 4视网膜显示器，但我将解释在Xcode编程时的工作原理：

如果您想支持视网膜和非视网膜设备，您必须拥有相同图像的2个版本。我建议您首先创建视网膜图像，因为它更容易减少（在Mac App Store上搜索“resizer”）。那么，视网膜图像必须命名为：yourimagename@2x.format。您的非视网膜图像，如：yourimagename.format。然后，在项目中添加两个图像，当您要加载它时，加载非视网膜版本。如果应用程序在视网膜设备上运行，程序将加载视网膜图像。

造成模糊效果是因为文本在视网膜中呈现，而图像则不是。这不是图像问题，只是图像分辨率的问题。视网膜图像是非视网膜图像尺寸（宽度和高度）的2倍，因此非视网膜是视网膜的一半。起初看起来有点令人困惑，但你会发现它根本不存在。

希望我帮助过你。如果您需要更多帮助，请询问！

Answer 3

问题神秘地消失了 - 我不知道究竟发生了什么。回答问题的人在问题消失时看到了网站。

一页响应式网站在iphone上模糊/模糊

3 个答案: