您现在的位置是：首页 > 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网站出现多图发布无法使用页面空白怎么办
昨天小编在使用织梦网站的时候遇到一个问题，在发布文章时，因为是使用了多张图片，在发布的时候出现空白现象，无法使用，小编百度了一下发现遇到这种问题的筒子们还
dedecms织梦通用转换程序DedePuzzle_V1.0搬家方法
DEDECMS官方给我们送上了实实在在的帮助，终于放出了DedePuzzle，DedePuzzle是一款织梦CMS通用转换程序，通过它可以实现一些的CMS的数据转换成织梦DedeCms上
dede5.7给栏目添加上缩略图功能的代码实例
将文件复制到程序根目录覆盖文件。图片字段：arcpic 调用图片路径：[field:arcpic/]执行下面的sql：
相关源码
-
(自适应)橙色家政服务清洁保洁服务pbootcms网站模板源码下载模板核心价值：基于PbootCMS内核开发的家政服务类网站模板，通过模块化设计展现服务项目、团队风采、服务案例等核心板块，突出时效预约、服务标准化展示等家政行业特性。查看源码 -
自适应APP应用程序介绍推广落地页pbootcms网站源码下载移动应用开发商设计的营销型落地页模板，基于PbootCMS内核深度开发采用前沿响应式架构，无缝适配手机端操作习惯与PC端展示需求。查看源码 -
(自适应响应式)超市仓储仓库货架展架网站pbootcms源码下载本模板为货架展架、仓储货架行业量身打造，采用PbootCMS内核开发，充分考虑了货架产品展示和企业形象展示的需求。模板设计简洁大方，突出产品特点，能够有效展示各类货架产品的规格参数和应用场景，帮助访客快速了解企业核心业务和产品优势。查看源码 -
(PC+WAP)绿色日志美文文学说说博客网站pbootcms模板除日志博客类网站外，通过替换图文内容可快速适配：心情日记分享平台、文学创作社区、朋友圈内容聚合站、美文鉴赏网站、读书笔记平台等应用场景。查看源码 -
(自适应)变压器电子元器件电器配件pbootcms网站模板源码为电子元器件企业打造的响应式网站模板，基于PbootCMS内核开发，助力企业快速构建专业级线上展示平台。支持页面独立设置标题、关键词和描述，内置SEO友好结构。PHP程序确保运行安全稳定，有助于提升搜索引擎收录效果。查看源码 -
(自适应)蓄电池能源智能数码科技产品pbootcms模板源码下载本款基于PbootCMS开发的网站模板为蓄电池及能源科技企业设计，特别适合锂电池、储能系统、新能源电池等产品的展示与推广。查看源码
| 分享笔记 （共有 篇笔记） |
