iPhone 3/4像素完美

我有一個問題，客戶需要一個移動網站，它必須在移動設備上顯示像素完美（強調iPhone）。iPhone 3/4像素完美

我有一個640像素寬的.PSD設計。

This網站告訴我，較舊的iPhone（< = 3）寬度爲320px，較新的（> = 4）寬度爲640px。

我的問題是 - 我如何製作一個單一的頁面，在舊版和新版設備上顯示相同的內容？我知道較新的版本有視網膜顯示，所以我留下的寬度和一切調整到640px或縮放.PSD下降到320px和調整一切？

謝謝！

2013-07-17 Andrej

此外，[TexturePacker（http://www.codeandweb.com/texturepacker/features）就派上用場了不同尺度來生成圖像。 – Daniel

您需要使用元視口標籤，以便瀏覽器知道基於設備計算尺寸。然後使用百分比（而不是像素）定義你的css類。

一個例子是這樣的：

<meta name="viewport" content="width=device-width">

如果您需要加載不同的圖像爲不同屏幕密度，你可以嘗試使用window.devicePixelRatio確定屏幕密度，然後使用JavaScript來加載正確的圖像。

2013-07-17 12:29:23 Mike

回答