WordPress免插件判断移动设备的三种方法

2016-05-08 15:45 阅读 322 次 评论关闭

猎微网刚刚分享了通过WordPress插件判断用户访问的是否为手机移动设备端,还是PC端。具体请查看《WordPress插件WP Mobile Detect判断手机、平板还是PC并显示对应的内容》,那么有没有WordPress免插件判断移动设备的实现方法呢?玩过wordpress的站长都知道,太多的WordPress插件会导致网站的访问速度变慢,不利于网站的优化。猎微网收集整理了WordPress免插件判断移动设备的三种方法,详情如下:

WordPress免插件判断移动设备的实现方法一

这是一段php通用的判断移动浏览器的函数,原理比较简单,就是判断浏览器返回的user_agent,条件包括手机系统、品牌和窗口大小。在WordPress主题的 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() ): ?>
//怎样怎样..(这里可以添加一个mobile.css,如<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/mobile.css" />)
<?php endif ;?>

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

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

WordPress免插件判断移动设备的实现方法二

其实官方已经在WordPress3.4版本后添加了这个WordPress免插件判断移动设备的相关函数wp_is_mobile(),利用这个函数很简单的实现相关判断。

wp_is_mobile()源码:

function wp_is_mobile(){
static $is_mobile;

if( isset($is_mobile))
return $is_mobile;

if( empty($_SERVER['HTTP_USER_AGENT'])){
$is_mobile =false;
}
else if ( strpos($_SERVER['HTTP_USER_AGENT'],'Mobile')!==false
|| 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){
$is_mobile =true;
}else{
$is_mobile =false;
}
return $is_mobile;
}

从源代码中我们可以看出,这个功能强大的函数,已经可以识别很多的移动设备的浏览器了,包括Iphone,ipad, android, silk, kindle ,BlackBerry,Opera Mini以及Opera Mini。这基本上已经满足了所有的移动设备了!
如果你想做一个响应式主题,也许这个函数会对你有帮助!

WordPress免插件判断移动设备的实现方法三

wordpress判断用户是否使用手机设备,搞移动页面调整的时候,需要用到这个东西,服务器端来判断用户的设备是不是手机。之前的d4在手机设备上浏览的时候,侧边栏是display:none的,这点很不人性化。手持设备注重的是速度和体验,没必要的东西最好不要上去,上去了又给隐藏掉,有点二。所以后来想想,如果在后端用php判断用户是否使用的是手机,那句比较轻松的防止加载没必要的东西了。之前是用css3来判断屏幕宽度,然后重定义css样式以获得最佳浏览体验。这个方法看似可行,其实病处不少,这个待后来慢慢讨论吧。回到本文的主题,php判断用户是否使用手机。

第一步:如果你和我一样使用的是wordpress,那就复制到主题的 function.php 文件wordpress

//判断是否属手机
function is_mobile() {
$user_agent = $_SERVER['HTTP_USER_AGENT'];
$mobile_agents = Array("240x320","acer","acoon","acs-","abacho","ahong","airness","alcatel","amoi","android","anywhereyougo.com","applewebkit/525","applewebkit/532","asus","audio","au-mic","avantogo","becker","benq","bilbo","bird","blackberry","blazer","bleu","cdm-","compal","coolpad","danger","dbtel","dopod","elaine","eric","etouch","fly ","fly_","fly-","go.web","goodaccess","gradiente","grundig","haier","hedy","hitachi","htc","huawei","hutchison","inno","ipad","ipaq","ipod","jbrowser","kddi","kgt","kwc","lenovo","lg ","lg2","lg3","lg4","lg5","lg7","lg8","lg9","lg-","lge-","lge9","longcos","maemo","mercator","meridian","micromax","midp","mini","mitsu","mmm","mmp","mobi","mot-","moto","nec-","netfront","newgen","nexian","nf-browser","nintendo","nitro","nokia","nook","novarra","obigo","palm","panasonic","pantech","philips","phone","pg-","playstation","pocket","pt-","qc-","qtek","rover","sagem","sama","samu","sanyo","samsung","sch-","scooter","sec-","sendo","sgh-","sharp","siemens","sie-","softbank","sony","spice","sprint","spv","symbian","tablet","talkabout","tcl-","teleca","telit","tianyu","tim-","toshiba","tsm","up.browser","utec","utstar","verykool","virgin","vk-","voda","voxtel","vx","wap","wellco","wig browser","wii","windows ce","wireless","xda","xde","zte");
$is_mobile = false;
foreach ($mobile_agents as $device) {
if (stristr($user_agent, $device)) {
$is_mobile = true;
break;
}
}
return $is_mobile;
}

第二步:if 语句

if( is_mobile() ){
Your Code
}

版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!
转载请注明:WordPress免插件判断移动设备的三种方法 | 猎微网

评论已关闭!