您现在的位置是:首页 > cms教程 > DedeCMS教程DedeCMS教程

dedecms手机wap网站图片自适应的bug修复

忆翠2023-09-19DedeCMS教程已有人查阅

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

在安装调试代码号手机版网站的时候,发现一个问题,图片无法很好的适应屏幕,宽度可以与屏幕同宽,而高度却没有按比例调整,导致图片看起来像被挤扁了一样,为什么会这样呢?
一般为了要达到图片自适应屏幕宽度的目的,我们在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标签的内容已经被过滤掉了,图片已经按比例缩小,不会出现比例失调的状况了。

本文标签:

很赞哦! ()

相关源码

  • pbootcms模板(PC+WAP)微信小程序开发公司网站本模板为微信小程序开发代理、软件开发公司等企业设计,基于PbootCMS内核开发,支持PC+WAP双端响应式布局,数据实时同步,适用于多行业快速建站。查看源码
  • (PC+WAP)蓝色公司注册财务会计公证律师网站源码下载本模板基于PbootCMS内核开发,为财务会计事务所、律师公证机构等专业服务机构打造。采用自适应设计,确保在各类设备上都能呈现专业视觉效果,帮助机构建立值得信赖的线上形象。查看源码
  • (响应式H5)帝国cms7.5文章新闻博客模板带会员中心本模板基于帝国CMS内核开发,为新闻资讯、个人博客及作品展示类网站设计。采用响应式布局技术,确保在手机、平板和电脑等不同设备上都能获得良好的浏览体验。查看源码
  • (PC+WAP)历史复古古典古籍文章资讯类pbootcms模板下载本模板基于PbootCMS系统开发,为古籍研究、历史文献类网站设计,特别适合展示古典书籍、历史档案等文化内容。采用复古风格设计,同时具备现代化响应式布局,确保在PC和移动设备上都能呈现优雅的阅读体验。查看源码
  • (自适应响应式)html5高档服装定制西服pbootcms模板下载本模板基于PbootCMS内核开发,为服装定制企业和服装品牌量身打造。设计风格时尚现代,充分展现服装行业的审美特质与品牌魅力。采用HTML5响应式技术,确保在各种设备上呈现视觉效果。整站布局注重产品展示与品牌叙事,帮助企业有效展示服装系列与定制服务,提升客户体验。查看源码
  • 自适应营销型IT网络工作室互联网建站公司pbootcms网站模板为IT网络服务商、建站企业打造的高性能营销门户,基于PbootCMS开源内核深度开发采用HTML5自适应架构,实现PC与手机端数据实时同步交互。查看源码
分享笔记 (共有 篇笔记)
验证码:

本栏推荐