有没有办法辨别iPhone 4访问者的iPhone 3G / S访问者？ [英] Is there a way to discern an iPhone 3G/S visitor to an iPhone 4 visitor?
问题描述
我想为iPhone 4用户加载更高分辨率的图片，但我知道检测用户的唯一方法是用户代理。但我的印象是，任何iOS4手机上的MobileSafari用户代理都是一样的。
I want to load higher resolution pictures for iPhone 4 users, but the only way I know of detecting users is by a user-agent. But I'm under the impression that the user-agent of MobileSafari on any iOS4 phone is the same across the board.
我能做些什么来检测iPhone 4？
What could I do to detect an iPhone 4?
推荐答案
您可以使用CSS3媒体查询来检测iPhone 4的设备像素比率（多少CSS像素等于物理显示像素）。然后，您可以使用CSS加载更高分辨率的图片，而不是普通图片。
You can use CSS3 media queries to detect the iPhone 4's device-pixel ratio (how many CSS pixels equal a physical display pixel). Then, you can use CSS to load higher-resolution images instead of the normal ones.
在< head> 标签，添加这个引用一个只为iPhone 4用户加载的外部样式表：
In the <head> tag on your web page, add this to reference an external stylesheet that will only be loaded for iPhone 4 users:
<link rel="stylesheet" type="text/css" href="high_res.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
媒体属性指定仅使用此最小设备像素比例为2的设备的样式表（即iPhone 4）。然后，您可以在high_res.css中添加CSS规则，以用高分辨率版本替换低分辨率图像：
The media attribute specifies to only use this stylesheet for devices with a minimum device-pixel ration of 2 (ie. the iPhone 4). Then, you can add CSS rules in high_res.css to replace low-res images with high-res versions:
#highres-if-possible {
background-image: url(high_res_pic.png);
}
请注意，您必须使用CSS background-image 属性而不是 src 属性。
Note that you will have to specify the image in HTML by using the CSS background-image property instead of the src attribute.
示例：对于60x50图片，请替换：
Example: for a 60x50 image, replace:
<img id="highres-if-possible" src="low_res_pic.png">
with
with
<img id="highres-if-possible" style="width: 60px; height: 50px; background-image: url(low_res_pic.png);">
不能保证像这样指定图像可以在所有浏览器（Internet Explorer）中使用，但它应该可以工作在符合标准的浏览器（以及在iPhone上）中罚款。
No guarantee that specifying images like this will work in all browsers (Internet Explorer), but it should work fine in standards-compliant browsers (and on the iPhone).
有关CSS3媒体查询以及使用它们检测iPhone 4的更多信息，请参阅： http：// blog。 iwalt.com/2010/06/targeting-the-iphone-4-retina-display-with-css3-media-queries.html
For more info on CSS3 media queries and using them to detect the iPhone 4, see: http://blog.iwalt.com/2010/06/targeting-the-iphone-4-retina-display-with-css3-media-queries.html
UPDATE ：我遇到了 this发布 和 这个帖子 可能有更好的方式来处理使用CSS指定图片（使用< img style =background-image：url（ http：// .. 。）> 而不是< img src =http ：// ...> ）比上面提到的要多。
UPDATE: I came across this post and this post that might have a better way to handle specifying the images using CSS (using <img style="background-image:url(http://...)"> instead of <img src="http://...">) than what I have above.
这篇关于有没有办法辨别iPhone 4访问者的iPhone 3G / S访问者？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
