您现在的位置是:首页 > 教程 > dedecms教程dedecms教程
dedecms手机wap网站图片自适应的bug修复
忆翠2023-09-19 16:00:07dedecms教程已有人查阅
导读在安装调试代码号手机版网站的时候,发现一个问题,图片无法很好的适应屏幕,宽度可以与屏幕同宽,而高度却没有按比例调整,导致图片看起来像被挤扁了一样,为什么会这样呢?
在安装调试代码号手机版网站的时候,发现一个问题,图片无法很好的适应屏幕,宽度可以与屏幕同宽,而高度却没有按比例调整,导致图片看起来像被挤扁了一样,为什么会这样呢?
一般为了要达到图片自适应屏幕宽度的目的,我们在img标签的样式中定义max-width:百%;height:auto;就可以了,可是这次设置了也没有效果。
没办法,由于用手机无法查看源代码,所以就在电脑上打开网站,然后查看源代码,发现文章中的图片还是保留了PC网页img标签原有的格式设定没有过滤掉,从而导致css文件中设置的img样式无效。
手机网站一般都会把文章的HTML进行修改,去掉一些复杂的样式,完成这些操作的代码是在wap.inc.php文件。
打开wap.inc.php看了一下,发现了问题。由于要过滤掉复杂的html标示,但是还需要保留图片,所以在过滤的时候,先把整个img标签给替代掉了,等过滤完之后,又替代回来,这样就导致了img标签里面的style 无法被过滤。
原因找到了,办法也很简单,我们只需在之后输出的时候过滤掉style=“”里面的信息,就可以让我们的自适应样式设定生效了。在/include/wap.inc.php中添加这句代码(红字部分):
一般为了要达到图片自适应屏幕宽度的目的,我们在img标签的样式中定义max-width:百%;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标签的内容已经被过滤掉了,图片已经按比例缩小,不会出现比例失调的状况了。
本文标签:
很赞哦! ()
相关文章
随机图文
-
dedecms修复不支持PHP5.3,5.4及以上版本后台500错误白屏
今天把系统换成了windows server 2008 r2 同时将PHP环境提升至PHP5.5版本,测试PHPinfo的时候一点问题都没有,但是登陆dede后台却显示500错误,这应该怎么解决呢? -
dedecms搬家dede_purview错误数据库导入失败的解决办法
今天把服务器上面的织梦网站打包回本地重现的时候,数据库导入老是不成功,总是提示dede_purview表有问题,百度了一下找到答案,并顺利解决。代码号小编在这里做个记录 -
织梦dede如何对描述字符description限制字数的方法
在织梦Dedecms中,在列表页调用文章摘要的方法主要有:1、[field:info /]2、[field:description /]3、[field: -
dede查询列表中实现单独显示查到多少条记录的方法
查询列表中需要在醒目的地方单独显示查到了多少条记录。无奈dede没有提供,只有自动动手搞。1. 找到include/arc.searchview.class.php 文件 ,找到 Display()函数,添加如下判断
留言与评论 (共有 条评论) |