今天升级到2.4.6版本之后,发现手机端的幻灯banner高度出现了一点问题,尝试找到并解决问题,思路如下:
先在当前版本打开一个网页,然后再恢复网站到上个版本,再打开网页,用F12,调试查看首页幻灯,分别对比看看哪里有什么区别。
我们找到属于头部幻灯的div:
<div class="flickity-viewport" style="height: 365px; touch-action: pan-y;">
这里有一个height控制着幻灯的高度,我们尝试修改大小,的确是能够控制幻灯的高度,这个高度是固定的,也就是我们在后台设置的幻灯片固定高度。

这个和我印象中的不太一样,因为我之前的版本,虽然也是设置的365,但是在手机端却只有100多,我们切到旧版网页,F12查看一下代码:
<div class="flickity-viewport" style="height: 110.766px; touch-action: pan-y;">
这里虽然也有一个height,但是我们调整网页宽度,可以发现这个height是会自动变化的,这个是一个自适应的高度。
搞清楚这个原理以后,我们不难猜出,这是新版b2更新带来的问题,那么我们就接着找下去,找到文件:
\b2\Modules\Templates\Modules\Sliders.php
第41行:
<div class="slider-in slider-info b2-radius" style="height:'.$data['slider_height'].'px;max-width:100%">
比较一下,之前一个版本的代码:
<div class="slider-in slider-info b2-radius" style="height:0;padding-top:'.round($data['slider_height']/$data['width']*100,6).'%;max-width:100%">
看到这里不难发现,上一个版本并非是用height来计算高度,而是用padding来控制高度,这样做的好处是自适应窗口大小,兼容移动端,但不知道出于什么想法,b2作者春哥在新一版主题中,取消了原来的写法,改用直接固定heigh。
这样就会导致我们主题在移动端的幻灯高度很大,因为pc端300多px的高度没有多高,而手机端则很高了。
解决办法:
1,把Sliders.php文件的41行代码,改回原来的;
2,我们尝试用另一种办法;
按照我的分析,这样的写法,7b2的主站应该也是有同样的问题,那么春哥自己没有发现吗?我们去一看便知。
这种写法可能会给不少的老用户带来困扰,以为更新之后移动端样式出现BUG了,其实不然,只是春哥换了一种写法。
电脑端,图片放大后回不去了
2.4.8春哥已经根据我的提议,恢复了原来的高度计算算法
2.4.8春哥已经根据我的提议,恢复了原来的高度计算算法