響應式網站的一頁在iPhone上模糊/模糊

Question

這是一個奇怪的問題。我在這裏開發一個自適應網站：

http://74.209.178.54:3000/index.html 

有迄今建成三個頁面：首頁，「爲什麼」頁，並在「定價」頁面。主頁和爲什麼頁面在我的iPhone 4上很好。「定價」頁面非常模糊。我不只是說圖像模糊 - 絕對一切都很模糊：文字，邊框，背景......

有沒有人見過這個？你知道發生了什麼事嗎？

Answer 1

問題是iPhone 4的視網膜顯示。我加載2個按鈕時有類似的問題，它們在iPhone 4上看起來很模糊（比你的網站多得多），但在我的3gs上看起來很棒（以及你的頁）。我不知道你需要做什麼來支持你的網站上的iPhone 4視網膜顯示器，但我會解釋如何在Xcode編程時工作：

如果你想支持視網膜和非視網膜設備，你必須有2個版本的相同圖像。我建議您先創建視網膜圖像，因爲它更容易減少（在Mac App Store上搜索「resizer」）。那麼，視網膜圖像必須命名爲：yourimagename@2x.format。您的非視網膜圖像，如：yourimagename.format。然後，在您的項目中添加這兩個圖像，當您想要加載它時，加載非視網膜版本。如果應用程序在視網膜設備上運行，程序將加載視網膜圖像。

這種模糊的效果是由於文本呈現在視網膜中，而圖像不是。這不是圖像問題，而只是圖像分辨率的問題。視網膜圖像的大小（寬度和高度）是非視網膜圖像的2倍，因此非視網膜是視網膜的一半。起初看起來有點令人困惑，但你會發現它根本沒有。

希望我幫你。如果你需要更多的幫助，只需要問一下！

Answer 2

這段代碼在你的CSS是造成問題： - （根據意見周圍線909或751）

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

正如你可以看到#logos正在使用的給定的邊框位於所有邊上 - 頁面寬度增加2px。然後，iPhone在打開和模糊頁面事件發生時放大整個頁面。

我敢肯定你知道該怎麼做，但這裏有雲： -

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

我沒有實際測試過這個在視網膜上的顯示iPhone，但它應該工作。

Answer 3

這個問題神祕地消失了 - 我不知道究竟發生了什麼。問題解決後，回答問題的人看到了該網站。