首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >WordPress 根据浏览器 user-agent 按需加载CSS 文件

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

作者头像
Jeff
发布2018-01-19 16:05:59
9530
发布2018-01-19 16:05:59
举报
文章被收录于专栏:DeveWorkDeveWork

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2013/08/31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档