我想为 iPhone 4 用户加载更高分辨率的图片，但我知道检测用户的唯一方法是通过用户代理。但我的印象是，任何 iOS4 手机上的 MobileSafari 用户代理都是完全相同的。
如何检测 iPhone 4？
最佳答案
您可以使用 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 在 HTML 中指定图像属性而不是 src属性。
示例:对于 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 指定图像(使用 <img style="background-image:url(<a href="http://.." rel="noreferrer noopener nofollow">http://..</a>.)"> 而不是 <img src="http://..."> )。
关于php - 有没有办法区分 iPhone 3G/S 用户和 iPhone 4 用户？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3436719/