iPhone 3/4 像素完美答案

【问题标题】：iPhone 3/4 pixel perfectioniPhone 3/4 像素完美
【发布时间】：2013-07-17 12:05:57
【问题描述】：

我有一个问题，客户需要一个移动网站，并且它必须在移动设备上显示完美像素（重点在 iPhone 上）。

我有一个 640 像素宽的 .PSD 设计。

This 网站告诉我旧版 iPhone (= 4) 的宽度为 640 像素。

我的问题是 - 如何制作一个在旧设备和新设备上都显示相同的页面？我知道较新的版本有视网膜显示，所以我是保留宽度并将所有内容调整为 640 像素，还是将 .PSD 缩小到 320 像素并调整所有内容？

谢谢！

【问题讨论】：

标签： iphone css

【解决方案1】：

您需要使用元视口标签，以便浏览器知道根据设备计算尺寸。然后使用百分比（不是像素）定义您的 css 类。

一个例子如下所示：

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

如果您需要为不同的屏幕密度加载不同的图像，您可以尝试使用 window.devicePixelRatio 确定屏幕密度，然后使用 javascript 加载正确的图像。

【讨论】：