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

2013/08/31 WordPress, WP开发综合 4 9,452

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

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

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 。

类似的，对于其他浏览器，则这么写法：

// 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 ，感谢原作者。