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

时间:2022-04-23
本文章向大家介绍WordPress 根据浏览器 user-agent 按需加载CSS 文件,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

在进行前端开发的时候,为了兼容性,比如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 ,感谢原作者。