我想添加一些检测到我的网站，这些是好的选择吗？

Question

当我对我的整个网站进行重新编码时，我需要选择两种方法来检测网页浏览器和移动设备。请您从下面的列表中推荐更好的选择方案。

以下是我的选择；

浏览器检测

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

移动设备检测

• CSS3媒体查询，尽管对于不支持IE版本的IE版本，以及对于检测具有显示整个网站的分辨率的移动设备(例如4.7“1080 p显示器或7”1080 p显示器)来说，这可能是个问题。
• 用户代理字符串通过PHP匹配(同样，不是整个字符串！)

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

谢谢。

Answer 1

不应使用浏览器检测，而应使用功能检测。为此，我强烈推荐现代派。

在设备检测方面，我使用的是PHP移动检测，它的工作原理非常棒。但是，大多数情况下，您只需通过媒体查询进行屏幕大小检测就可以了：

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

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

这显然过于简化了，您可以将其设置为任意大小，并有多个版本(平板电脑、巨型屏幕等)。更多的信息可以在这里找到。

也就是说，IE8及以下版本不支持媒体查询，因此您需要执行基于Javascript的检测。如果使用现代化，您只需检测它，将屏幕大小的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';
}

同样，这是过于简化，但应该给你一个概念，从哪里开始。