2011-04-20 111 views
0

的推荐意见也苹果有任何建议使用任何技术的浏览器嗅探(如桌面IE/FF /移动Safari浏览器(即新iPad)来区分)/其他平板电脑苹果的浏览器嗅探

我知道苹果要我们避免同样使用User-agent。

是媒体技术万无一失的方式来区分iPad和Xoom吗?

<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px)" href="ipad.css"> 
+0

在阅读Akamike的回答后,我现在想知道为什么你想这样做?这是因为您希望您的网站运行良好还是因为您想跟踪设备? – 2011-04-20 16:22:45

回答

3

而不是试图检测设备/用户代理,你想专注于检查浏览器的功能。这包括屏幕分辨率,JS支持,CSS支持等等。

媒体查询只是众多技术中的一种,您可以使用这些技术使您的网站在许多设备上都能正常工作。为了让您一开始,这里有一些有用的资源:

添加额外的风格 - 概念,逐步增强网站
  • Using media queries in the real world - Broken Links的证明
  • +0

    而不是使用第三方库,是否有一个更简单的方法来做到这一点..就像你说的JS支持..我们可以检测iPad和桌面浏览器之间,通过任何特定的JS功能..我试图避免任何第三方库,我的网页上的第三方库.. – testndtv 2011-04-20 17:08:09

    +0

    就像我说的,检测功能不是用户代理。 Modernizr(主动维护)可以让您自己添加所有检测,但如果您有兴趣,可以在http://diveintohtml5.org/detect.html上查看HTML5功能检测的示例,并通过https:// github查看Modernizr的源代码.com/Modernizr/Modernizr/blob/master/modernizr.js – akamike 2011-04-20 20:42:45

    +0

    好的。当你说特征检测时,它会区分说桌面Safari和Mobile Safari ..我的意思是让我们说我想设置一个div的宽度为100px对于桌面Safari和50px的移动Safari。使用功能检测,我将能够应用不同的风格? – testndtv 2011-04-21 06:29:51

    0

    请参阅Apple开发人员网络上的Optimizing Web Content。本文包括使用条件CSS来识别浏览器功能,以及Safari浏览器发送的各种用户代理字符串的差异。