Welcome to

Mr.Xiong

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

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

一、引言

在实际开发中,前台开发人员会针对于项目准备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,谢谢大家的阅读!祝每天开心~
版权声明:本文为博主原创文章,未经博主允许不得转载。

赞赏

微信赞赏支付宝赞赏

2 条回应 “网站开发之处理PC端移动端切换”
  1. Mr.Lua 2019年3月10日 on 下午6:04 回复

    真心不错~

    • Mr.Xiong 2019年3月20日 on 下午4:44 回复

      觉得有帮助可赞赏~

发表评论

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

雄心勃勃但谦卑温逊!

>> <<