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

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);
}

请注意，您必须使用 CSSbackground-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）。

更新：我发现这篇文章和这篇文章可能有比我上面更好的方法来处理使用 CSS 指定图像（使用而不是）。<img style="background-image:url(http://...)"><img src="http://...">