网站开发之处理PC端移动端切换

• 作者: Mr.Xiong
• 日期: 2018年9月25日
• 分类: Composer, PHP
• Tags: Composer, mobiledetect, TP5
• 阅读量: 4,185

一、引言

在实际开发中，前台开发人员会针对于项目准备PC端、移动端两套前台Demo，那么后台开发人员是否需要针对于两套前台Demo，写两个前台模块、遍历两次数据呢？当然没必要，实际上两套前台Demo需要的数据大同小异；拿前台首页来说，哪怕你有PC端和移动端两个页面，我们也只写一个前台首页控制器去加载模板及遍历数据。这里我们拿 ThinkPHP5 来具体演示。

二、安装 mobiledetect

进入 Composer 中文网 ，点开安装包列表搜索【mobiledetect】。

Mobile_Detect 是一个用于检测移动设备的轻量级 PHP 类。它使用 User-Agent 字符串与特定 HTTP 标头相结合来检测移动环境。

Terminal 执行 composer require mobiledetect/mobiledetectlib 进行安装。

三、代码部署

在前台模板公共控制器中添加如下代码：

protected $mobile_detect;

//实例化 mobiledetect 类
public function __construct(){
   $this->mobile_detect = new \Mobile_Detect();
}

protected function view($vars = [], $replace = [], $code = 200)
{
   $template = $this->request->action();
   if ($this->mobile_detect->isMobile()) {
      $template = "mobile_".$template;
   }
   return $this->fetch($template, $vars, $replace, $code);
}

完成以上代码后，拿首页视图来说，view/index 下放两个文件：

index.html & mobile_index.html

此时便可以用一个控制器来实现PC端及移动端加载模板及遍历数据。

四、前台处理切换

注：之前三步操作为后台处理切换，前台处理切换用处不明显，不推荐。

在 index.html 中添加如下代码：

<script type="text/javascript">
       if(window.location.toString().indexOf('pref=padindex') != -1){}else{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){window.location.href="html/mobile.html";}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}
</script>

Finally，谢谢大家的阅读！祝每天开心~
版权声明：本文为博主原创文章，未经博主允许不得转载。

赞赏

微信赞赏支付宝赞赏