请选择 进入手机版 | 继续访问电脑版
查看: 1187|回复: 1
收起左侧

Discuz手机图显示太小和字体行距太近的问题解决方法

2016-12-18 10:20:31 | 显示全部楼层 |阅读模式
不知道是出于什么原因,Discuz手机触屏版把图片做得特别的小。在上传时,它会生成一张手机版的缩略图,尺寸很小,就算在CSS模板上把尺寸放大,也会把图片扩展得模糊不清,在手机模板上,图片的高宽尺寸被设置得特别小,一般是140px这样。
! A0 D& U) I8 T0 [2 D4 o
! \4 j/ M$ U- B% E; A' N网上有很多教程,但是都不全面或者解决不了这个问题。今天特别收集了有效的方法,分享给大家:; H1 B3 t9 m6 I
1,打开后台设置(管理中心),后台——全局——上传设置——基本设置——是否生成手机版缩略图,这里选择“否”;2 m5 d+ i/ r7 j3 [" F& M; ^7 E' E$ e5 ]8 @
2、调整触屏版图片尺寸,打开\template\default\touch\forum\discuzcode.htm文件,找到以下代码
+ G5 j2 M# x# w/ a8 P. r7 |
  1. $fix = count($post[imagelist]) == 1 ? 140 : 83;
复制代码
找到这段代码后,把数值改一下,修改好的代码如下:
# l6 w! ^0 }/ p$ R) Q! r3 ~; P
  1. $fix = count($post[imagelist]) == 1 ? 650 : 800;
复制代码
相当于把140px宽的小图改成宽650px、高800px,差不多就是大屏幕手机的实际尺寸了。在此建议电脑版图片上传时的设置最大宽度不超过800px,否则加载速度会特别慢哦(电脑版图片大小设置路径:后台-界面-界面设置-帖子内容页-帖子图片最大宽度)。
+ _7 u2 R7 B  S0 Y# X, o5 K继续找出以下代码
: Q/ y% ?. \' C, L% k  ]% z' l
  1. $mobilethumburl = $attach['attachimg'] && $_G['setting']['showimages'] && (!$attach['price'] || $attach['payed']) && ($_G['group']['allowgetimage'] || $_G['uid'] == $attach['uid']) ? getforumimg($attach['aid'], 0, 140, 140, 'fixnone') : '' ;
复制代码
修改数值,修改后如下:
6 o" Z3 X$ I! s6 X" Y7 C+ t7 x, e
  1. $mobilethumburl = $attach['attachimg'] && $_G['setting']['showimages'] && (!$attach['price'] || $attach['payed']) && ($_G['group']['allowgetimage'] || $_G['uid'] == $attach['uid']) ? getforumimg($attach['aid'], 0, 650, 800, 'fixnone') : '' ;
复制代码

1 a' `' d6 [7 c; N7 r3,CSS调整,打开\static\image\mobile\style.css,找到如下代码:
0 m1 b9 g. n' y& w' ~! i4 E' M6 s/ x
  1. .plc .pi .message img,.plc .pi .img_one img { margin:0px 4px 0px 0; max-width:140px; max-height:140px; }
复制代码
修身为如下代码:
+ e% L+ q6 n. N8 _
  1. .plc .pi .message img,.plc .pi .img_one img {max-width:98%; display:block;vertical-align: middle;margin-bottom:4px;}
复制代码
看到了吗,CSS也一样限制了高和宽的,我们改为按屏幕尺寸的百分比来进行显示,为了不撑破屏幕布局,请不要设置成100%了,建议98%即可。都设置好以后,在后台更新一下模板的缓存,触屏版的图片显示就正常了,如果还有疑问,请关注微信公众号「拾叁庄」,留言说明问题,我会尽快为你解答。" K/ a' Z+ A! U+ B6 q

+ X& b1 G/ g9 S: n: e接着,说说帖子字体行间距离的问题
/ U/ u# ]+ q) C* p0 C3 ?- p7 P平时发帖写文章,如果不注意排版,那么你有没有发觉整个版面密密麻麻很不美观?其实主要是每行字的距离靠得太近了,看久了眼睛容易累,而且阅读时容易跳行或者漏行。我们只要把字行间距设置一下就好了,至少看着会美观不少。
+ V3 ~( [- \" W! @8 j8 d修改方法很简单:
5 H. w! i/ G5 i6 W) l9 {; g打开Discuz后台——界面——风格管理——找到正在使用的风格模板——点击编辑——帖子内容字号——14px;
: E) O: f( l5 N# Z3 m3 g默认值是14px,我们在这个默认值的后面加上一个参数,变成:14px; line-height:2   (参数里的2代表行间距,你可以自行修改,如果改为3的话,间距就比较大了,不过也还可以接受,我觉得2就行了); V$ Z4 k* G' \- w, p1 Z' l
) E. k9 V3 N& T3 r% S( \; W
怎么样?以上都解决你的问题了吗?) m* D! O9 W7 j0 h  Z' j

% Z% x# J3 e2 e5 K6 @# }. i
回复

使用道具 举报

2018-12-17 15:34:20 | 显示全部楼层
不错,很实用的方法,不同版本都能使用这个技巧哦,希望后期官方也能完善这个不足。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

热点推荐

ZALEER与你快乐分享

关注公众号

访问手机版

客服QQ:9:00-16:00

258173854

运营中心:广西贵港市

email:admin@i4cu.cn

Copyright © 2001-2020 Comsenz Inc. Powered by Discuz! X3.4 ( 桂ICP备18007810号-1 )
快速回复 返回列表 返回顶部