有没有办法辨别iPhone 3G / S访客iPhone 4访客?

时间:2010-08-09 00:46:21

标签: php javascript html mobile-safari

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

如何检测iPhone 4?

2 个答案:

答案 0 :(得分:3)

您可以使用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)上正常工作。

有关CSS3媒体查询的更多信息并使用它们来检测iPhone 4,请参阅:http://blog.iwalt.com/2010/06/targeting-the-iphone-4-retina-display-with-css3-media-queries.html

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

答案 1 :(得分:-1)

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