Question

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

以下是我的选择;

浏览器检测

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

移动设备检测

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

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

谢谢。

Answer 1

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

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

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

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

显然过于简单，您可以将其设置为您想要的任何尺寸，并具有多个版本（平板电脑，巨型屏幕等）。 More information can be found here.

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

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

然后通过screensize动态应用正确的文件：

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

这又是过度简化了，但应该让你知道从哪里开始。

我想在我的网站上添加一些检测功能;这些好选择吗？

1 个答案: