zblog怎么实现PC端和移动端显示不同网站(不完美兼容)

2021-06-15 11:16:31 浏览数 (1)

还是那句话,目前没有完美的兼容方法,无论是不同主题插件还是多主题插件,都不能实现无缝切换,所以建议不要折腾,如果非得折腾,新建一个测试网站慢慢折腾,简单说下为什么不能完美兼容(无论什么插件),就说一点,侧栏,如果你使用的PC端的主题有一个侧栏,这个侧栏在PC端有样式列表,但是轻奢主题没有这个样式表就会出现错乱的现象,这不是BUG仅仅是因为没有样式表,还缺少插件接口等问题,所以建议你们不要去想着怎么兼容,把精力放在网站内容上吧。

刚刚上架一款百度的MIP主题,轻奢主题,主要就是针对移动网站加速,的确打开的速度要比我们正常的网站快,所以我感觉还是有必要去做的,但是每个人的需要是不一样的,比如想你这种人(没有别的含义,就是想法多的人吧),想实现PC用锦鲤主题,然后移动端使用最新的轻奢主题,这个刚刚测试了一下的确可以实现,但是需要修改一处代码和开启是个插件。

再次声明,我仅仅测试可以使用,但是具体是否有bug我并没有深度测试,自己看看研究吧,但是据我估计,出错也是在模块管理的位置,因为移动端不能设定侧栏的显示内容,假如PC端的某个侧栏内容,移动端没有,那么可能会出现错乱,举个例子:

某个主题集成点赞文章最多的调用,但是轻奢主题并没有这个模块,就可能导致此模块样式错乱,这个得实际查看才知道,我都是用自己主题设置的,并未出现问题。还有一点需要声明,使用百度MIP的轻奢主题,需要强制开启MIP插件,此插件会禁用一切外链的JS调用,所以PC端也可能出现某些功能失效,没有用过什么插件,也没有什么特殊模块的可以尝试使用此方法实现PC移动两种风格,不多说了,直接上教程;

首先购买我的百度MIP-轻奢主题(当然你可以使用别主题,这只是举例),然后在左侧菜单的应用中心搜索“不同域名不同主题”插件,下载开启,如图:

设置方法如图:

设置移动端的域名解析,例如“m.talklee.com”,然后把此域名解析到网站服务器上,网站在绑定此域名,最后选择主题,这里就是指移动端访问的主题,点击右侧保存即可。

插件设置完成,还需要修改PC端一处代码,找到主题目录下的(/zb_users/theme/主题ID/template)header.php文件,点击右键编辑,当然这里使用使用FTP修改,什么你不懂FTP?那好吧,官方提供了主题的在线编辑插件,还是应用中心搜索“主题编辑”下载,启用:

在新对话款找到header.php文件,如图:

找到代码 meta name="viewport" 的标签(具体代码可能有差异)

代码语言:javascript复制
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1.0,user-scalable=no"/>

替换成

代码语言:javascript复制
{if koilee_is_mobile()}<script>location.href="http://m.talklee.com"</script>{/if}

其中 “koilee”是我主题集成的判断插件,可以换成你当前正在使用的主题ID,如果你的主题没有集成那么需要手动添加,代码最后附上,然后把m.talklee.com替换成你自己的移动端域名就行了,最后回到首页,点击清空缓存并编译,用手机访问下试试成功了。建议结合梦想家和锦鲤主题搭配百度MIP轻奢主题使用,有问题欢迎留言反馈。

PS:附上判断代码,找到主题下的include.php文件,添加如下代码:

代码语言:javascript复制
function 主题ID_is_mobile() {
	if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
		$is_mobile = false;
	} elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.)
		|| 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
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false ) {
			$is_mobile = true;
	} else {
		$is_mobile = false;
	} 	return $is_mobile;}

把主题ID换成你的主题名就可以了,不在放在第一行和最后一行。

使用方法(官方):

代码语言:javascript复制
{if 主题ID_is_mobile()}
手机端代码
{else} 
PC端代码
{/if}

主题的使用方法:

主题需要的代码是这个,不是上面的):

代码语言:javascript复制
{if 主题ID_is_mobile()}<script>location.href="http://m.talklee.com"</script>{/if}

然后就OK了。

0 人点赞