【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 类库最强大的地方是，它有一个非常完整的库，可以检测出所用的设备类型（包括操作类型，以及手机品牌等都能检测）和浏览器的详细信息。
使用演示：
// 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 这个函数，但这不在本文讨论之列。