WordPress 教程:让 WordPress 自动识别手机移动设备

[ 博客 ]

判断移动浏览器的原理比较简单,就是判断浏览器返回的 user_agent,条件包括手机系统、品牌和窗口大小。在主题的 functions.php 内加上如下代码,目前已包含常见移动浏览器的useragent,基本上可以涵盖可能会用手机上网的用户群了。

function is_mobile() {
$user_agent = $_SERVER['HTTP_USER_AGENT'];
$mobile_browser = Array(
"mqqbrowser", //手机QQ浏览器
"opera mobi", //手机opera
"juc","iuc",//uc浏览器
"fennec", "ios", "applewebKit/420", "applewebkit/525", "applewebkit/532", "ipad", "iphone", "ipaq", "ipod",
"iemobile", "windows ce",//windows phone
"240x320", "480x640", "acer", "android", "anywhereyougo.com", "asus", "audio", "blackberry", "blazer", "coolpad" , "dopod", "etouch", "hitachi", "htc", "huawei", "jbrowser", "lenovo", "lg", "lg-", "lge-", "lge", "mobi", "moto", "nokia", "phone", "samsung", "sony", "symbian", "tablet", "tianyu", "wap", "xda", "xde", "zte"
);
$is_mobile = false;
foreach ($mobile_browser as $device) {
if (stristr($user_agent, $device)) {
$is_mobile = true;
break;
}
}
return $is_mobile;
}

然后在主题任意模板如顶部加上如下判断:

<?php if (is_mobile() ): ?>
<!-- 这里放入如果是移动设备将会加载的内容代码,如加载移动设备专用的样式 -->
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/mobile.css" />
<?php } else { ?>
<!-- 如果不是移动设备将会加载的内容代码,如默认的 loop 代码 -->
<?php } ?>

还需要注意的一点:不管是单独的WordPress主题还是自适应主题,都需要在头部将添加下面meta,否者可能导致手机显示字体过小等问题。

<meta name="viewport" content="width=device-width"/>

发表评论

电子邮件地址不会被公开。

随机