请输入搜索关键字!

织梦DedeCMS手机wap网站图片自适应bug修改

游龙模板网(www.crjwz.com) | 2020-08-20 20:15 | 关注:199 我要投稿

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

在安装调试游龙模板网手机版网站的时候,发现一个问题,图片无法很好的适应屏幕,宽度可以与屏幕同宽,而高度却没有按比例调整,导致图片看起来像被挤扁了一样,为什么会这样呢?
 
一般为了要达到图片自适应屏幕宽度的目的,我们在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标签的内容已经被过滤掉了,图片已经按比例缩小,不会出现比例失调的状况了。
 
本文永久链接地址:http://www.crjwz.com/article/1183.html
精品源码
视觉焦点
网友跟帖

共有 条评论

    推荐文章

    自适应网站与响应式网站有什么区别?

    新网站怎样做SEO优化?

    怎样建营销型网站?都具备什么样的特征

    怎样才能把网站关键词排名做到首页?

    网站做的SEO总没效果是什么原因

    相关文章

    联系我们

    • 游龙模板公众号
      全面掌握电商一手资讯

    • 游龙模板服务号
      精彩活动,推送提醒

    垂询热线:189-5250-0766

    合作投稿:1845609988@qq.com

    扬州市宝应县泰山西路乐意楼

    备案号:苏ICP备15018259号-2