Question

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

我的.PSD设计宽度为640px。

This网站告诉我，较旧的iPhone（＆lt; = 3）的宽度为320像素，较新的（> = 4）宽度为640像素。

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

谢谢！

Answer 1

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

示例如下：

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

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