0

在我重新编码整个网站时，我需要选择几种方法来检测 Web 浏览器和移动设备。从下面的列表中，您能推荐更好的选择吗？

这是我的选择；

浏览器检测

  • 使用特定于 IE 的注释参数来定位 IE6 - IE8 CSS 文件；IE9+ 和其他浏览器会使用相同的 CSS 文件
  • Web 浏览器用户代理字符串通过 PHP 匹配（不是整个用户代理字符串！）

移动设备检测

  • CSS3 媒体查询，尽管这对于不支持它们的 IE 版本以及检测具有能够显示完整网站的分辨率的移动设备（例如 4.7" 1080p 显示器或 7" 1080p 显示器）可能会出现问题
  • 用户代理字符串通过 PHP 匹配（同样，不是整个字符串！）

理想情况下，我希望所有移动设备（智能手机和平板电脑）都显示网站的移动版本，并可以选择通过用户代理开关查看桌面版本，我知道 Android 上的 Chrome、Firefox 和 Opera 提供（至少）。

谢谢你。

4

1 回答 1

2

您不应该使用浏览器检测，而应该使用特征检测。为此，我强烈推荐Modernizr。

关于设备检测，我使用PHP Mobile Detect，它工作得非常好。但是，大多数情况下，您只需通过媒体查询进行屏幕尺寸检测即可：

@media screen and (max-width:759px){
    /* mobile CSS */
}

@media screen and (min-width:760px){
    /* browser CSS */
}

这显然过于简单，您可以将其设置为您想要的任何尺寸，并且有多个版本（平板电脑、巨屏等）。更多信息可以在这里找到。

也就是说，IE8 及以下版本不支持媒体查询，因此您需要进行基于 Javascript 的检测。如果您使用 Modernizr，您可以检测它，将屏幕大小的 CSS 复制到一个单独的文件中，并通过为您的 CSS 链接提供 ID 来动态应用该 CSS 文件：

<link rel="stylesheet" type="text/CSS" id="ApplyQueries" href="queries.css" />

然后按屏幕大小动态应用正确的文件：

if(document.documentElement.clientWidth < 760){
    document.getElementById('ApplyQueries').href = 'mobile.css';
} else {
    document.getElementById('ApplyQueries').href = 'browser.css';
}

同样，这过于简化了，但应该让您知道从哪里开始。

于 2013-11-05T17:29:48.907 回答