开启左侧

[DEDE] 织梦DedeCMS手机版图片自适应问题

[复制链接]
发表于 2018-4-8 01:43:17 | 显示全部楼层 |阅读模式
在手机页面模板里添加图片style标签过滤,去除图片的长宽设置,这样在手机端图片就不会变形了,如下:
在安装调试DEDECMS手机版网站的时候,发现一个问题,图片无法很好的适应屏幕,宽度可以与屏幕同宽,而高度却没有按比例调整,导致图片看起来像被挤扁了一样,为什么会这样呢?
一般为了要达到图片自适应屏幕宽度的目的,我们在img标签的样式中定义max-width:100%;height:auto;就可以了,可是这次设置了也没有效果。
通过查看源代码,发现文章中的图片img标签原有的style格式设定没有过滤,从而导致css文件中设置的img样式无效。如下图:


新版的移动端访问是从根目录的m文件夹底下的php文件访问,调用的模板文件是templets/default/目录底下以“_m.htm"结尾的模板文件。在这里我们需要修改article_article_m.htm。由于我这个网站还有一个image的图集模板,所以我还要需要修改article_image_m.htm,通过preg_replace函数过滤图片的style标签。
在需要修改的模板文件里,查找
<td>{dede:field.body/} {dede:field.vote/} (责任编辑:{dede:adminname/})</td>
修改为
<td>{dede:field.body function="preg_replace('/style=.+?[*|\"]/i','', @me)"/} {dede:field.vote/} (责任编辑:{dede:adminname/}))</td>
修改完之后保存,再开启页面的时候,查看源代码,style标签的内容已经被过滤掉了,图片已经按比例缩小,不会出现比例失调的状况了。





平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2018-4-8 01:44:33 | 显示全部楼层
  织梦移动端的文档图片不变形,相信很多做dede建站的朋友,会遇到这个问题,其实这个也很简单,就是把移动端文档内容中图片的style属性删除,那么具体怎么做呢



  织梦pc端图片


  首先我们来了解下,为什么要设置图片的自适应,在pc端网站,我们会设置图片的大小,也就是width以及height的像素,而在移动端,受限于手机屏幕的大小,也就是手机屏幕尺寸和分辨率,如果你在pc固定大小了,当你图片的宽度大于手机的宽度,你手机的页面会被你图片支撑开,还有另外一种就是宽度是自适应,但是高度被拉长,如下图



  织梦移动端图片


  假如你设置织梦移动端中的文档图片,css样式为100%,那么你会发现当你图片的宽度小于你手机的宽度,你的图片会被拉大,甚至变形,所以如果没处理好织梦移动端文档中的图片,就会发生以上两种情况,页面被支持开或者图片变形。

  那么如何才能处理好这个问题呢,如果你懂响应式建站的话,相信你不会有这个纠结,如果不会的话,可以和博主一样,用这个方法:

   在安装调试跟版网手机版网站的时候,发现一个问题,图片无法很好的适应屏幕,宽度可以与屏幕同宽,而高度却没有按比例调整,导致图片看起来像被挤扁了一样,为什么会这样呢?

  一般为了要达到图片自适应屏幕宽度的目的,我们在img标签的样式中定义max-width:100%;height:auto;就可以了,可是这次设置了也没有效果。

  没办法,由于用手机无法查看源代码,所以就在电脑上打开网站,然后查看源代码,发现文章中的图片还是保留了PC网页img标签原有的格式设定没有过滤掉,从而导致css文件中设置的img样式无效。如下图:





  手机网站一般都会把文章的HTML进行修改,去掉一些复杂的样式,完成这些操作的代码是在wap.inc.php文件。

  打开wap.inc.php看了一下,发现了问题。由于要过滤掉复杂的html标示,但是还需要保留图片,所以在过滤的时候,先把整个img标签给替代掉了,等过滤完之后,又替代回来,这样就导致了img标签里面的style 无法被过滤。

  原因找到了,办法也很简单,我们只需在最后输出的时候过滤掉style=“”里面的信息,就可以让我们的自适应样式设定生效了。在/include/wap.inc.php中添加这句代码(红字部分):

  $content = preg_replace("/style=.+?[*|\"]/i", "", $content);

  $content = preg_replace("/&[a-z]{3,10};/isU", ' ', $content);

  return $content;

  修改完之后保存,再开启页面的时候,查看源代码,style标签的内容已经被过滤掉了,图片已经按比例缩小,不会出现比例失调的状况了。



平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2018-4-8 01:45:40 | 显示全部楼层
找到并打开手机端的文章内容页模板,将里面的{dede:field.body/}标签修改一下,改为如下的标签:
  1. {dede:field.body runphp=yes}
  2. global $cfg_basehost;
  3. $str = @me;
  4. $search = '/(<img.*?)width=(["\'])?.*?(?(2)\2|\s)([^>]+>)/is';
  5. $search1 = '/(<img.*?)height=(["\'])?.*?(?(2)\2|\s)([^>]+>)/is';
  6. $search2 = '#(<img.*?style=".*?)width:\d+px;([^"]*?.*?>)#i';
  7. $search3 = '#(<img.*?style=".*?)height:\d+px;([^"]*?.*?>)#i';
  8. $content = preg_replace($search,'$1$3',$str);
  9. $content = preg_replace($search1,'$1$3',$content);
  10. $content = preg_replace($search2,'$1$2',$content);
  11. $content = preg_replace($search3,'$1$2',$content);
  12. @me = $content;
  13. //@me = str_replace('/uploads/allimg/', $cfg_basehost.'/uploads/allimg/', $content);//手机版图片使用绝对路径
  14. {/dede:field.body}
复制代码


也就是通过php代码将文章内容里面的图片标签的宽度高度全部去掉,这样就可以了。
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

 
QQ在线咨询
售前咨询热线
0532-88371356
售后服务微信
pingduwangzhan
快速回复 返回顶部 返回列表