b2更新后发现首页幻灯在手机端不能自适应高度了

今天升级到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的主站应该也是有同样的问题,那么春哥自己没有发现吗?我们去一看便知。

隐藏内容,您需要满足以下条件方可查看
End

这种写法可能会给不少的老用户带来困扰,以为更新之后移动端样式出现BUG了,其实不然,只是春哥换了一种写法。

人已赞赏
二次开发

B2主题专题滚动特效原理解析

2020-8-20 14:01:58

二次开发

b2主题美化文章列表:增加特性标签和重新布局

2020-9-6 17:26:49

免责声明本文中提到的资源均来自于互联网,仅供个人学习交流,若您喜欢本文可附上原文链接随意转载。
版权人申诉:我要申诉
3 条回复 A文章作者 M管理员
  1. 电脑端,图片放大后回不去了

  2. 2.4.8春哥已经根据我的提议,恢复了原来的高度计算算法

  3. 2.4.8春哥已经根据我的提议,恢复了原来的高度计算算法

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索