您现在的位置是：首页 > 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标签的内容已经被过滤掉了，图片已经按比例缩小，不会出现比例失调的状况了。
感谢您的认可和支持
微信
支付宝
本文标签：
很赞哦！ ()
相关教程
图文教程
织梦dedecms5.7文章不能上传图片提示Upload filetype not allow
如果你后台设置可以上传图片，而上传图片是出现 Upload filetype not allow !这个提示仅需要修改一个字母，即可解决问题！
dedecms文章自动获取本文链接本文地址的方法
我们经常看到织梦程序所建立的网站某一些文章，在文章末尾有自己文章的网址链接，或提示为本文链接，或提示为本文地址，转载请注明出处等等。这里面的好处是不言而喻了
织梦dedecms修改专题列表模板的方法
如果没有进行特别的设置，专题的文章列表显示默认是采用的default下面的article_spec.htm文件作为模板。这个模板文件很简单，前面是该专题的
织梦网站信息统计代码大全
目前为止，全的织梦模板 V5.5网站信息统计代码，有图为证：代码如下：{dede:sql sql="select count(mid) as c fro
相关源码
-
(自适应)WordPress二次元博客主题SakurairoSakurairo主题为二次元内容创作者设计，提供丰富的动漫风格元素和个性化的展示效果。该主题在原有Sakura主题基础上进行了功能增强，支持多种自定义设置，满足动漫爱好者建立个人博客的需求。查看源码 -
(自适应)APP应用软件落地页单页推广页网站模板下载基于PbootCMS内核开发的响应式单页模板，为企业产品展示、服务推广等应用场景设计。通过简洁直观的视觉布局与高效的技术架构，帮助用户快速构建专业级落地页面，实现移动端与PC端数据实时同步展示。查看源码 -
(自适应响应式)HTML5简繁双语电子元器件设备制造Pbootcms模板下载本模板为电子科技设备制造、电子元件生产等高科技企业设计，采用PbootCMS内核开发，具备简繁双语切换功能。模板设计充分考虑了电子科技行业的技术展示需求，能够专业呈现各类电子元器件、电路板、智能设备的参数规格和应用方案。查看源码 -
(PC+WAP)蓝色低碳环保隔断板装修装饰类网站pbootcms源码下载本款基于PbootCMS开发的网站模板为活动隔断板、装修装饰行业打造，特别适合移动隔断、环保隔断、办公分区等产品的展示与推广。查看源码 -
(PC+WAP)绿色日志美文文学说说博客网站pbootcms模板除日志博客类网站外，通过替换图文内容可快速适配：心情日记分享平台、文学创作社区、朋友圈内容聚合站、美文鉴赏网站、读书笔记平台等应用场景。查看源码 -
响应式HTML5家居建材办公家具桌椅pbootcms模板为家居建材、办公家具企业打造的响应式网站模板，同时支持多行业快速适配通过替换文字图片即可转型为其他行业官网，大幅降低开发成本。查看源码
| 分享笔记 （共有 篇笔记） |
