如何在WordPress中检测用户的浏览器类型并根据浏览器类型定义页面样式

在Wordpress中检测浏览器的类型,并根据浏览器类型定义CSS样式表,提高CSS样式表的兼容性。

1. 在functions.php中添加下面的函数

<?php  add_filter('body_class','browser_body_class');  

function browser_body_class($classes) {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
    	if($is_lynx) $classes[] = 'lynx';
		elseif($is_gecko) $classes[] = 'gecko';
	   	elseif($is_opera) $classes[] = 'opera';
		elseif($is_NS4) $classes[] = 'ns4';
		elseif($is_safari) $classes[] = 'safari';
		elseif($is_chrome) $classes[] = 'chrome';
		elseif($is_IE) $classes[] = 'ie';
		else $classes[] = 'unknown';   

	if($is_iphone) $classes[] = 'iphone';
  	return $classes;  }  ?>

通过上述代码,Wordpress会在body标签上添加一个浏览器类型的类.class 。

具体示例如下:

<body class=”home blog logged-in ie“>

2. 在style.css中定义相关类

例如:

.ie .post_title{margin-bottom:15px;} 

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:

无觅相关文章插件,快速提升流量

任鸟飞网页设计博客 谜题推理 No.1 Web Design Gallery IndustryIdea LookForDesign AWebGallery Mobile Web Template iDesign Wallpaper Big Funny Picture iPhone Faves iPhone Mobi iPad Faves Android Faves BlackBerry Faves Best Design Magazine All Banner Templates Blog Earn Tips 是谁啊 只爱美人 家乡美 唯美爱 美人衣妆 AutoCAD 2D | Pro/E 3D江苏名企The HTML5 Templates