您现在的位置是：首页 > 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中添加这句代码（红字部分）：
一般为了要达到图片自适应屏幕宽度的目的，我们在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标签的内容已经被过滤掉了，图片已经按比例缩小，不会出现比例失调的状况了。
感谢您的认可和支持
微信
支付宝
本文标签：
很赞哦！ ()
相关教程
图文教程
dede全站RSS订阅静态输出的实现方法
这个网络上就是这么个有趣和多样，有人喜欢让RSS订阅自动更新，动态显示，这样可以省下部分力气。可有人也喜欢静态，他觉得蜘蛛大人也是喜欢静态的
0基础学DedeCms模板制作教程
Dedecms的代码很有特色，只要熟悉以后很快就能上手而且使用非常灵活。dede模板引擎的代码样式有如下几种形式：-
织梦dedecms巧用标签实现图片自动alt功能方法
很多织梦网站的站长筒子们在做网站的时候，在网站中有时候会插入图片，尤其是那些使用图片类型的站长筒子，在使用图片集的时候，会用到很多的图片 
织梦dedecms调用全站相关文章的代码
织梦DedeCms 有个标签可以调用相关文章，通过下面的修改可以调用全站的相关文章，文章页内显示相关文章内容，可以提高关键词密度，还是挺不错的。
相关源码
-
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与手机端数据实时同步交互。查看源码
| 分享笔记 （共有 篇笔记） |
