• 欢迎访问 流觞·曲水,WordPress教程,技术,分享,天文,古风,软件···
  • 推荐使用Firefox浏览器或Chrome浏览器访问本网站
  • 欢迎来到流觞·曲水O(∩_∩)O~~
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏流觞·曲水

WordPress判断移动设备并加载不同代码

WordPress判断移动设备并加载不同代码
最近一直在研究怎么优化流觞曲水的移动端访问的问题,因为流觞曲水的部分美化样式并不适合在移动端显示(比如动态背景,还有这个萌萌哒的四糸乃),其实WordPress中早已经引入了一个更强大,方便用的函数 wp_is_mobile()。这个函数可以自动检测出当前访客使用的浏览设备是不是移动设备,并返回一个布尔值,从而可以在移动端和PC端输出不同的代码,来完成你的自定义需求。
查阅官方文档发现,这个函数位于 wp-includes/vars.php 中,其源代码为:

/**
 * Test if the current browser runs on a mobile device (smart phone, tablet, etc.)
 *
 * @return bool
 */
function wp_is_mobile() {
	if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
		$is_mobile = false;
	} elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.)
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false ) {
			$is_mobile = true;
	} else {
		$is_mobile = false;
	}

	return $is_mobile;
}
从代码里我们可以发现wp_is_mobile()已经可以识别大多数的移动设备的浏览器了,包括Iphone,ipad, android, silk, kindle ,BlackBerry,Opera Mini以及Opera Mini。这基本上已经满足了所有的移动设备了

使用方法:

如果你需要使特定的代码仅在移动端/PC端显示

<?php if ( wp_is_mobile() ){ ?>
(这里设置为移动端输出的代码,因为流觞曲水不需要,所以为空)
<?php }else { ?>
这里设置你电脑端需要输出的代码,移动端访问将不显示
<?php } ?>

如果你需要在移动端、电脑端输出指定内容:

<?php if ( wp_is_mobile() ){
    echo '你正在使用移动设备浏览';
}else{
    echo '你目前使用的不是移动设备';
} ?>

如果你恰好需要构建响应式布局,相信 wp_is_mobile()一定可以帮到你的。


只是 wp_is_mobile() 虽然好用,但是也有一个局限性:
每次调用都需要经过服务器的运算,也就是不支持静态化(缓存)。如果你的网页中调用了wp_is_mobile(),而你又恰好设置了缓存,那么就会出现 PC端可能访问到移动端页面,移动端访问PC端页面 的尴尬。

为了避免这个尴尬情况的出现,我们需要借助于JavaScript,下面给出JavaScript版本代码

/*  非移动端判断,加载下面的js代码 */
if(!/iphone|ipod|ipad|ipad|Android|nokia|blackberry|webos|webos|webmate|bada|lg|ucweb|skyfire|sony|ericsson|mot|samsung|sgh|lg|philips|panasonic|alcatel|lenovo|cldc|midp|wap|mobile/i.test(navigator.userAgent.toLowerCase())){
    document.write('<script src="https://ls12.me/pc.js"></script>'); // 只在PC端加载js
    document.write('<link href="https://ls12.me/pc.css" />'); // 只在PC端加载的css
}

php版本和js版本大家各持所需,选择使用。


流觞·曲水 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明WordPress判断移动设备并加载不同代码
喜欢 (0)
[847198075@qq.com]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 学习了|´・ω・)ノ
    Jrohy2016-09-08 23:34 回复 Windows 10 | Chrome 53.0.2785.101
  2. 谢谢楼主分享!
    东方求败2016-09-04 22:17 回复 Linux | Safari浏览器 534.30