您现在的位置是：首页 > 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联动方式二级变一级的方法，现在就来说一下如何修改文件，找到infolink.lib.php
织梦dedecms上一页下一页列表翻页单独调用的实现代码
这个效果就是，列表页上的上一页和下一页，就是单独调用这两个功能，那么怎么实现呢？ 简单搞了一下，仅作上下翻页，主页类似，可自行添加。 修改办法如下
dede织梦网站搬家出现/include/templets/default/index.htm Not Fo
用dede建了个网站，原先网站是在web/dev57/下的，后来移到web/下,在网站搬家后出现这样一个错:/include/templets/default/index.htm Not Found!-
织梦dedecms怎么优化提高网页打开速度
最近一直在研究如何提高网站的用户体验性，我们知道加快网页的打开速度是提高用户体验性的一种有效策略。影响网页打开速度的因素很多
相关源码
-
(自适应)摄像头安防电子设备pbootcms源码下载本模板基于PbootCMS系统开发，为安防电子设备企业设计，特别适合监控摄像头、安防系统等产品的展示。采用响应式技术，确保各类设备参数和功能在不同终端上都能清晰呈现。查看源码 -
(自适应)重工工业机械挖掘机机推土机网站源码下载基于PbootCMS内核开发的专业级重工机械企业网站模板，适用于挖掘机、推土机等重型工业设备展示。采用响应式设计技术，确保在各类设备上均能呈现专业视觉效果，帮助企业建立数字化展示窗口。查看源码 -
pbootcms模板(自适应手机版)红色响应式单位机构类网站自适应响应式单位机构网站模板 | PbootCMS内核开发为机构组织设计的响应式网站模板，采用PbootCMS内核开发，支持一键替换行业内容，满足多元化场景需求。查看源码 -
(PC+WAP)地暖热水器烘干机节能设备网站模板下载为地暖热水器及节能设备企业设计的PbootCMS网站模板，集成产品展示、节能方案介绍、技术参数说明等专业模块。采用PC与移动端同步响应架构查看源码 -
帝国cms7.5个人博客资讯文章模板下载本模板简洁个人博客网站设计开发，采用帝国CMS内核构建，只需替换文字图片即可快速搭建专业网站。自适应手机端设计，数据实时同步，操作简单便捷。PHP程序确保安全稳定运行，帮助您以较低成本获取持续业务。查看源码 -
(自适应)英文绿色精密模具零件加工五金零件pbootcms外贸网站模板本模板基于PbootCMS开发，为五金零件、精密模具加工等英文外贸企业设计。采用响应式布局，适配各类移动设备，是五金零件企业开展国际贸易的专业展示平台。查看源码
| 分享笔记 （共有 篇笔记） |
