我有一个问题，客户需要一个移动网站，它必须在移动设备上显示完美像素（重点是 iPhone）。
我有一个 640 像素宽的 .PSD 设计。
这个网站告诉我旧款 iPhone (<= 3) 的宽度为 320 像素，而较新的 iPhone (>= 4) 的宽度为 640 像素。
我的问题是 - 我如何制作一个在旧设备和新设备上都显示相同的页面？我知道较新的版本有视网膜显示，所以我是保留宽度并将所有内容调整为 640 像素，还是将 .PSD 缩小到 320 像素并调整所有内容？
谢谢！
问问题
87 次
1 回答
1
您需要使用元视口标签，以便浏览器知道根据设备计算尺寸。然后使用百分比（不是像素）定义您的 css 类。
一个示例如下所示：
<meta name="viewport" content="width=device-width">
还有一篇博文：http ://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
如果需要为不同的屏幕密度加载不同的图像，可以尝试使用 window.devicePixelRatio 确定屏幕密度，然后使用 javascript 加载正确的图像。
http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html
于 2013-07-17T12:29:23.950 回答