Discuz！X系列启用手机客户端后针对电脑版界面的一些优化措施
其实在很早以前，Discuz！X 系列较新的版本已经集成了手机客户端插件（mobile），但是在启用该插件后，浏览电脑版界面存在一些美观度问题，需要优化。
主要问题：
1.使用客户端发帖后，帖子内容末尾自动加上了“来自：Android客户端”提示，但是和帖子内容挤在了一块，影响界面美观
2.帖子内容页左侧的用户头像位置，自动添加了客户端图标（安卓、IOS、WP），但是默认的图标实在是太大了，会遮挡头像，十分不美观
优化办法：
1.之前已经做过一些优化，具体参见：
http://www.wenliren.com/forum.php?mod=viewthread&tid=45999
2.可以尝试将图标显示缩小至原大小1/2（1:2优化），并调整图标css样式来优化。具体步骤为：
（1）下载以下路径的图片，使用图片处理工具（Fireworks或Photoshop）将其大小按比例缩至原图的50%（46*400 => 23*200），保存后上传覆盖原图
static/image/common/mobile-type.png注意：如果使用了扩展图片目录，则操作扩展目录下相应图片文件（一般存放在类似于 template/yourtmp/img/... 的目录中）
（2）按路径打开如下文件
template/default/common/module.css（3）查找如下代码
/** forum::forumdisplay,forum::viewthread,group::forumdisplay,group::viewthread **/
/* 开启快速发帖和推荐表情时的样式 by Pony */
#f_pst .bm_c { padding: 20px; }
#f_pst .tedt { width: auto; }
.hasfsl { margin-right: 170px; zoom: 1; }
#f_pst .upfl { height: auto; max-height: 100%; }
#f_pst .upfl td { padding: 4px 0; }
#f_pst .atds { width: 100px; }
#f_pst .px { padding: 2px; }
/*
Name: mod_mobile-type
Level: Function
Explain: 手机发帖的相关样式
Author: Lushnis
Last Modify: Pony 1204111343
*/
.mobile-type { position: absolute; margin: -5px 0 -85px 103px; width: 58px; height: 80px; background: url({IMGDIR}/mobile-type.png) no-repeat 100% 100%; }
.ie6 .mobile-type, .ie7 .mobile-type { margin-left: 88px; }
.mobile-type a { display: block; width: 46px; height: 80px; background: url({IMGDIR}/mobile-type.png) no-repeat 0 0; }
.mobile-type-2 a { background-position: 0 -80px; }
.mobile-type-3 a { background-position: 0 -160px; }
.mobile-type-4 a { background-position: 0 -240px; }
.ie6 .mobile-type, .ie6 .mobile-type a { background-image: url({IMGDIR}/mobile-type-ie6.png) !important; }
.mobile-location { padding-left: 20px; background: url({IMGDIR}/mobile-attach-2.png) no-repeat 0 0; }
/*
Name: threadbeginid
Level: Function
Explain: 起始动画或图片的位置样式
Author: Jane
Last Modify: Jane 1210251731
*/
#threadbeginid { position: fixed; top: 0px; left: 0px; z-index: 999; }
#threadbeginid .beginidin { position: absolute; top: 0; right: 0px; z-index: 999; }
#threadbeginid .beginidimg { background: white; filter:alpha(opacity=0); opacity: 0; }
/** end **/（4）将上述代码中首末行及中间的部分复制，追加粘贴至当前模板目录下的extend_module.css文件中
（5）继续编辑extend_module.css文件，参考如下代码修改相应的css参数
/** forum::forumdisplay,forum::viewthread,group::forumdisplay,group::viewthread **/
/* 客户端图标 */
/*
Name: mod_mobile-type
Level: Function
Explain: 手机发帖的相关样式
Author: Lushnis
Last Modify: Pony 1204111343
*/
.mobile-type { position: absolute; margin: -5px 0 -85px 132px; width:29p; height:40px; background: url({IMGDIR}/mobile-type.png) no-repeat 100% 100%; }
.ie6 .mobile-type, .ie7 .mobile-type { margin-left:117px; }
.mobile-type a { display: block; width:23p; height:40px; background: url({IMGDIR}/mobile-type.png) no-repeat 0 0; }
.mobile-type-2 a { background-position: 0 -40px; }
.mobile-type-3 a { background-position: 0 -80px; }
.mobile-type-4 a { background-position: 0 -120px; }
.ie6 .mobile-type, .ie6 .mobile-type a { background-image: url({IMGDIR}/mobile-type-ie6.png) !important; }
.mobile-location { padding-left: 20px; background: url({IMGDIR}/mobile-attach-2.png) no-repeat 0 0; }
/** end **/（6）保存，覆盖上传至当年使用模板相应目录；
（7）更新缓存，刷新页面查看修改后的效果。
演示链接：http://www.zaishuxia.com/thread-38-1-1.html
页:
[1]