请选择 进入手机版 | 继续访问电脑版

我爱自学

 找回密码
 会员注册

QQ登录

只需一步,快速开始

Discuz教程手机触屏版图片尺寸修改

可能是出于节省移动端流量的考虑,Discuz手机触屏版把图片搞得非常小。上传图片的时候,生成一张手机版缩略图,这个图的尺寸很小,就算通过修改模板放大尺寸,图片也很模糊。而且在手机模板上,图片的高和宽设置得非常小,140像素,用户体验非常差。

如下图所示:
PC版,图片显示正常,内容清晰

discuz图片尺寸

discuz图片尺寸


对应触屏版:图片尺寸小,内容模糊不清,非常影响用户体验.

discuz图片尺寸

discuz图片尺寸


Discuz手机触屏版图片尺寸修改方法:

1、进入Discuz系统后台,依次进入全局-上传设置-基本设置。 找到“是否生成手机版缩略图”设置选项,选择否并保存。

2、触屏版图片尺寸修改,打开\template\default\touch\forum\discuzcode.htm文件,查找如下内容
  1. $fix = count($post[imagelist]) == 1 ? 140 : 83;
复制代码

改为
  1. $fix = count($post[imagelist]) == 1 ? 650 : 800;
复制代码

就是把140像素的小图改为宽650高800,这样的设置贴近屏幕的手机的实际尺寸。建议电脑版的图片上传时就设置最大宽度不超过700,不然加载速度会很慢。

然后再找
  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') : '' ;
复制代码

改为
  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') : '' ;
复制代码


3、CSS设置,打开\template\default\touch\common\elecnation_style.css,查找如下内容
.plc .pi .message img,.plc .pi .img_one img { margin:0px 4px 0px 0; max-width:140px; max-height:140px; }

改为

.plc .pi .message img,.plc .pi .img_one img {max-width:98%; display:block;vertical-align: middle;margin-bottom:4px;}

默认的CSS文件,限制了触屏版的高和宽,我们修改为按屏幕尺寸的百分比来显示。为了不撑破,别搞100%了,98%就足够了。

更新模板缓存,触屏版的图片就正常了。

点击阅读更多内容!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

手机版|小黑屋|我爱自学 ( 蜀ICP备19015358号-3 )

GMT+8, 2022-12-6 02:57 , Processed in 0.050505 second(s), 36 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

本站部分资源来源网络,仅供学习与交流使用,如果侵犯到您的权益,请及时联系本站(569705694@qq.com)删除该资源。

X
淘宝聚划算
快速回复 返回顶部 返回列表