【DeveMobile实例】利用Mobile Detect 制作单独移动端页面项目

【DeveMobile实例】利用Mobile Detect 制作单独移动端页面项目

Mobile Detect 这个PHP 类库Jeff 很早就运用到实际项目中了,如Devework 主题,移动主题DW Mobile Swither及最近的DeveMobile主题主页

Mobile Detect 简介

Mobile Detect 是一个轻量级PHP 移动设备探测类,它通过HTTP Header 中的User-Agent 字符串来检测移动设备。该PHP 类库最强大的地方是,它有一个非常完整的库,可以检测出所用的设备类型(包括操作类型,以及手机品牌等都能检测)和浏览器的详细信息。

项目主页 Github主页

使用演示:

// Include and instantiate the class.
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
 
// Any mobile device (phones or tablets).
if ( $detect->isMobile() ) {
 
}
 
// Any tablet device.
if( $detect->isTablet() ){
 
}
 
// Exclude tablets.
if( $detect->isMobile() && !$detect->isTablet() ){
 
}
 
// Check for a specific platform with the help of the magic methods:
if( $detect->isiOS() ){
 
}
 
if( $detect->isAndroidOS() ){
 
}
 
// Alternative method is() for checking specific properties.
// WARNING: this method is in BETA, some keyword properties will change in the future.
$detect->is('Chrome')
$detect->is('iOS')
$detect->is('UC Browser')

实例介绍

DeveMobile 主题主页pc、移动单独页面的实现

可能你发现DeveMobile主题主页用pc浏览器及在手机上的访问页面是不同的,实现的方法异常简单,就是上面的代码:

if ( $detect->isMobile() ) {
 include('mobile-index.php');
}else {
 include('index.php');
}

Devework 主题手机版的切换实现

如果你希望为你的WordPress 主题制作一个附属的手机版本(附属是指文件都是单独在一个主题中且自动切换,而非一个pc端主题+一个手机主题),思路其实可以这样:对单个主题构成文件采用pc端+手机独立的方法,比如说header.php,正常PC 访问就是主题根目录的header.php,移动端访问则为mobile/header.php(即独立另外个header.php)。那么借助Mobile Detect,你可以这样实现(以下部分使用“伪代码”):

比如说heade.php 原来是这样的:

<!DOCTYPE html>
.....
.....
<?php wp_head();?>
<head/>

那么要按照上面的思路,则为:

<?php if($detect->isMobile())): include('mobile/header.php');else : ?>
<!DOCTYPE html>
.....
.....
<?php wp_head();?>
<head/>
<?php endif;?>

以此类推,其他主题文件都是如此。

PS:WordPress虽然有 wp_mobile 这个函数,但这不在本文讨论之列。

评分:
3.67 avg. rating (76% score) - 3 votes
云左主机 广告
3 条 评论
  1. 厉害啊,正需要

    回复
  2. 这个给了很大的启发,下一代更新的话可以考虑这个方案来处理。

    回复
  3. 响应式在手机端需要加载很多多余的文件,在中国这个流量=金钱的国度里,确实需要一些方法优化

    回复
发表评论