Question

我想为iPhone 4用户加载更高分辨率的图片，但我知道检测用户的唯一方法是由用户代理。但我的印象是，任何iOS4手机上的MobileSafari用户代理都是一样的。

如何检测iPhone 4？

Answer 1

您可以使用CSS3媒体查询来检测iPhone 4的设备像素比（有多少CSS像素等于物理显示像素）。然后，您可以使用CSS来加载更高分辨率的图像而不是正常的图像。

在网页上的<head>标记中，添加此标记以引用仅为iPhone 4用户加载的外部样式表：

<link rel="stylesheet" type="text/css" href="high_res.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />

media属性指定仅将此样式表用于设备像素比率最小为2的设备（即iPhone 4）。然后，您可以在high_res.css中添加CSS规则，以使用高分辨率版本替换低分辨率图像：

#highres-if-possible {
    background-image: url(high_res_pic.png);
}

请注意，您必须使用CSS background-image属性而不是src属性在HTML中指定图像。

示例：对于60x50图像，请替换：

<img id="highres-if-possible" src="low_res_pic.png">

与

<img id="highres-if-possible" style="width: 60px; height: 50px; background-image: url(low_res_pic.png);">

不能保证指定这样的图像可以在所有浏览器（Internet Explorer）中使用，但它应该在符合标准的浏览器（以及iPhone）上正常工作。

更新：我遇到了 this post 和this post，可能有更好的方法来处理使用CSS指定图像（使用{{ 1}}而不是<img style="background-image:url(http://...)">），而不是我上面的。{/ p>

Answer 2

使用HTTP_USER_AGENT字符串，您可以找出它是哪一个。我从来没有尝试过，但是如果能让你开始的话。我也见过几个php库，它会为你做。希望这可以帮助。欢呼声。