您现在的位置是：首页 > 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标签的内容已经被过滤掉了，图片已经按比例缩小，不会出现比例失调的状况了。
感谢您的认可和支持
微信
支付宝
本文标签：
很赞哦！ ()
相关教程
图文教程
织梦dedecms多语言网站的制作方法
织梦（dedecms）如何制作多语言网站？对于多语言网站，可能许多人都想进行制作，可又不明白其中的道理；因为多语言网站不仅仅只是一个网站站点，具有多个而且
织梦dedecms软件列表页中怎么调用软件大小
我们都知道，在织梦的软件列表页{dede:list }循环标签中使用[field:softsize/]标签调用软件大小字段默认是调用不出来的，但是我们可以通过设置来让这个标签能够正常调用
织梦cms调用栏目页和单独内容页的方法
常用的需要调到首页来的单页内容，比如企业简介、联系我们等等内容，我们在首页可能都要进行体现。通过常规的方式，包括查阅dede官方论坛资料-
织梦dedecms模型管理系统模型改成自动模型的方法
怎样把织梦dedecms的系统模型改成可以能删除的自动模型呢，其实很简单，方法如下。1、进入数据库phpmyadmin，找到dede_channltype表。
相关源码
-
(PC+WAP)餐饮奶茶美食小吃招商加盟pbootcms模板源码下载为茶饮烘焙、小吃快餐等餐饮品牌打造的招商加盟系统，助力品牌快速拓展市场；双端pc+wap设计呈现加盟政策对比表。支持后台实时更新菜品图片、加盟费用等关键信息。查看源码 -
(自适应)绿色新闻生活百科资讯文章博客类网站pbootcms模板源码本模板基于PbootCMS开发，为生活百科、资讯文章和博客类网站设计。采用清新绿色系风格，提供舒适的阅读体验，同时适配PC和移动设备。适用于生活技巧分享、健康知识传播查看源码 -
(自适应)HTML5响应式双语绿色物流运输快递货运pbootcms源码本款基于PbootCMS开发的网站模板为物流运输、快递货运行业设计，采用HTML5技术构建，支持简繁字体切换。模板设计充分考虑了货运物流行业的特点，可专业展示运输服务、物流网络和业务优势等内容。查看源码 -
(自适应)响应式文章博客互联网新闻pbootcms模板下载本模板基于PbootCMS开发，专为科技新闻、互联网资讯和文章博客类网站设计。采用响应式布局技术，确保在电脑、平板和手机上都能获得最佳浏览体验。适用于科技媒体、行业博客查看源码 -
(PC+WAP)蓝色不锈钢簧线金属制品营销型pbootcms网站模板本模板基于PbootCMS内核开发，为不锈钢及金属制品企业量身打造。采用响应式设计，适配PC与移动设备，提供统一后台管理体验，数据实时同步更新。查看源码 -
(自适应响应式)高端家用办公家具家居桌椅pbootcms模板下载为办公家具企业设计的响应式网站模板，涵盖产品展示、案例呈现、企业介绍等核心模块。通过可视化后台可快速发布实木桌椅、系统家具、办公屏风等产品信息，帮助客户直观了解材质参数与空间搭配方案。查看源码
| 分享笔记 （共有 篇笔记） |
