WordPress 根据浏览器 user-agent 按需加载CSS 文件

5,737
WordPress 根据浏览器 user-agent 按需加载CSS 文件
  • 4.67 / 5 5
4.67分(3票)
WordPress 根据浏览器 user-agent 按需加载CSS 文件

在进行前端开发的时候,为了兼容性,比如hack 那个讨厌的IE 浏览器,我们常常需要<!--[if IE X]>这类IE 判断代码来实现hack 的效果。而在WordPress 中,我们可以借助PHP 的功能,通过判断浏览器user-agent 来按需加载CSS 文件——如此不仅仅只是对IE hack,对于chrome 、firefox 等主流浏览器也可以实现不同的样式效果。

先看下面的代码,添加到主题的functions.php 文件下:

1
2
3
4
5
6
7
8
9
10
11
12
13
function dw_enqueue_styles() {
	global $wp_styles;
	if (!is_admin()) {
		// ua vars
		global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
		// chrome
		if ($is_chrome) {
			wp_register_style('chrome', get_template_directory_uri() .'/chrome.css', false, null);
			wp_enqueue_style('chrome');
		}
	}
}
add_action('wp_print_styles', 'dw_enqueue_styles');

上面的代码应该很容易看懂,具体不解释了;如果你想对chrome 浏览器进行CSS hack,将CSS 代码以chrome.css 保存在主题目录下;如果用户的浏览器是chrome 浏览器,便会加载该chrome.css 文件,非chrome 浏览器绝对不加载——除非浏览器伪装user-agent 。

类似的,对于其他浏览器,则这么写法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// mozilla firefox 火狐
if ($is_gecko) {
	wp_register_style('mozilla', get_template_directory_uri() .'/mozilla.css', false, null);
	wp_enqueue_style('mozilla');
	}
 
// safari
if ($is_safari) {
	wp_register_style('safari', get_template_directory_uri() .'/safari.css', false, null);
	wp_enqueue_style('safari');
	}
 
//IE 浏览器
if ($is_IE) {
       wp_register_style('ie', get_template_directory_uri() .'/ie.css', false, null);
       wp_enqueue_style('ie');
                }

这么说来,如果想对不同浏览器进行不同的样式展示,这个是再好不过的方法了。

代码最初来源自WP-MIX ,感谢原作者。

喵~本文目前有4条留言,欢迎发表评论!

  1. 板凳也不错
    :

    ie6 7 8 9 如何判断啊

    [回复]
  2. 传说中的沙发
    :

    先收藏了~国庆的时候转载走!

    [回复]

打破沉默,我来发表评论鸟~