跳至正文

WordPress 提示:如何检测访问者的浏览器类型

WordPress 提示:如何检测访问者的浏览器类型

有时我们需要提供特定内容或调整某些 Web 浏览器。有几种方法可以做到这一点。例如,我们可以使用JavaScriptBrowserDetect.browser函数我们还可以使用以下注释标记专门针对 Internet Explorer

Modernizr对于浏览器的功能检测很有用,因此我们能够修补不支持的功能。我们也可以使用 CSS3 media query,虽然它不是为了检索浏览器信息而设计的,但它对于处理网站展示很有用,尤其是在移动浏览器中。

60 多个最受欢迎的 WordPress 技巧和技巧(更新)

60 多个最受欢迎的 WordPress 技巧和技巧(更新)


你有没有遇到过 WordPress 博客,看到你喜欢的东西,然后想到;
他们是怎么做到的,…
阅读更多

PHP浏览器检测

然而,所有这些方法都只是改变了正面,而文档标记中的实际内容不受影响。比方说,我们有两个<div>元素,一个用于 Internet Explorer,一个用于另一个。无论浏览器如何,这两个元素实际上都会保留在文档中。

在某些情况下,这些方法可能不是理想的解决方案。因此,唯一可行的选择是使用服务器端语言,例如PHP如果您使用的是 WordPress,可以使用名为PHP Browser Detection的插件轻松完成此操作。

条件函数

当这个插件被激活时,它不会在仪表板中给你任何东西。相反,它提供了几个条件函数供您在主题文件中使用——例如 page.php、index.php 等。它允许在所有流行的桌面和移动设备(例如 iPad 和 iPhone)中进行检测。

基本用法

让我们看一些使用示例。比如说,我们只想向 Internet Explorer 用户显示通知。我们可以在header.php中写这样的东西<body>

1个
2个
3个
4个
5个
6个
7
<?php if ( is_IE() ) {
  $browserInfo = php_browser_info();
  $browser = $browserInfo[browser];
  $version = $browserInfo[version];
 
  echo '<div class="browser-notification">You are using '.$browser.' '.$version.' . Please, update your browser for better experience.</div>';
}; ?>

通过样式表中的一些样式调整,Internet Explorer 用户将看到以下内容。

但是,当我们在其他浏览器(Firefox、Opera、Safari 和 Chrome)中看到它时,不会生成通知标记。

如前所述,我们还可以针对移动设备,这对于在移动平台上优化您的 WordPress 网站非常有用。假设您在主题中启用了帖子缩略图支持,我们可以将以下功能添加到您的index.php以在移动设备中提供较低的图像分辨率,并在桌面浏览器中提供较高的分辨率。

1个
2个
3个
4个
5个
<?php if ( is_mobile() ) {
  the_post_thumbnail( 'small' );
} else {
  the_post_thumbnail( 'large' );
}; ?>

这些只是几个示例,请转到WordPress.org 页面以更详细地了解此插件

标签:

发表回复