您现在的位置是：首页 > 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标签的内容已经被过滤掉了，图片已经按比例缩小，不会出现比例失调的状况了。
感谢您的认可和支持
微信
支付宝
本文标签：
很赞哦！ ()
相关教程
图文教程
织梦cms注册邮件内容的修改方法
很多客户在使用DEDECMS模板的启动邮件注册验证，当输入邮件服务器信息，启动自动发送注册通知的时候，发现后台没有邮件模板，仔细研究了下，原来是集成在注册
dedecms织梦tag标签调用方法语法说明
dedecms tag 标签调用方法dede标签调用的基本语法是：getall='0' 获取类型 0 为当前内容页TAG标记，1为获取全部TAG标记
织梦dedecms列表模板页面怎么增加推荐特荐图标
织梦DedeCMS文章内容发布系统中可以选择“头条”、“推荐”、“特荐”等属性，我们可以利用这些条件加一个判断的标签，然后给文章列表加一个推荐的印戳
dedecms5.6数据批量索引到淘特搜索引擎的实现方法
1、通过Mysql运行Sql语句：alter table dede_archives add LinkUrl varchar(255); 2、后台目录下的makehtml_archives_action.php备份一下
相关源码
-
自适应响应式绿色装修公司定制家居类pbootcms网站下载(自适应手机端)响应式全屋装修定制家居类网站pbootcms模板 绿色装修公司网站源码下载PbootCMS内核开发的网站模板，该模板适用于装修定制网站、装查看源码 -
自适应车行汽车租赁二手车行业企业网站模板为汽车租赁与二手车交易场景深度优化，采用PbootCMS内核开发，聚焦车辆展示、租赁流程与服务介绍三大核心模块。响应式布局确保PC与移动端数据实时同步，后台一键管理车辆信息查看源码 -
(自适应)营销型健身器材产品设备类pbootcms模板网站为健身器材企业打造的营销型网站模板，基于PbootCMS开源内核开发。采用HTML5响应式架构，PC与移动端数据实时同步，适配多终端展示场景。查看源码 -
(PC+WAP)家居装饰家装建材营销型网站pbootcms模板下载本模板基于PbootCMS开发，主要服务于家居装饰、建材及相关行业。采用现代化设计风格，同时适配PC和移动设备访问。模板结构清晰，突出展示家装案例和建材产品，帮助企业在线上建立专业形象，有效展示产品与服务优势。查看源码 -
帝国cms7.5游戏门户H5小游戏网站模板源码免费下载基于帝国CMS7.5开发的H5游戏门户模板，为在线游戏平台设计。支持PC端与移动端同步生成，打造完整的游戏娱乐体验平台。查看源码 -
(自适应)html5中英双语通用机械设备pbootcms模板下载本模板基于PbootCMS内核精心开发，为机械设备制造企业量身打造。设计风格大气稳重，充分展现机械行业的专业特质与技术实力。采用HTML5技术构建，支持中英文双语切换，满足国际化业务需求。整站布局合理，充分展示企业产品、案例与服务，帮助访客快速了解企业核心优势。查看源码
| 分享笔记 （共有 篇笔记） |
