很多用织梦做站的老站长应该都碰过这糟心事:PC端页面好好的,切到移动端要么排版乱成一锅粥,要么图片直接溢出屏幕,要么按钮缩成芝麻点半天按不到,查半天找不到问题在哪,急得直挠头。
很多人改模板的时候图省事,PC和移动端共用同一个模板文件,加媒体查询的时候随便写两句就完事,要么权重不够被原有样式直接覆盖,要么选择器写错了只改了半块内容,说白了就像上半身穿西装下半身搭睡裤,能顺眼才怪。
排查的时候先打开F12控制台,切到移动端模拟模式,点乱掉的元素看样式栏有没有被划掉的适配属性,要是有就是权重不够,要么给适配属性加个!important,要么把选择器写得更精准,基本就能覆盖原有样式。
织梦默认的附件上传功能是不带自适应参数的,很多人直接传个2000px宽的原图就发,PC端屏幕宽刚好装下,移动端屏幕才300多px宽,直接就把整个页面撑变形。
直接改个函数就能一劳永逸解决,找到根目录下/include/extend.func.php,加一段代码:
``` // 给内容页上传的图片自动加自适应样式 function setImgAuto($body){ $body = preg_replace('/改完去内容页模板调用正文的位置,把默认的{dede:field.body/}改成{dede:field.body function='setImgAuto(@me)'/},之后新上传的图片自动就带自适应属性,老内容批量改的话直接去数据库跑个替换语句就行,不用一个个翻文章改。

说真的这是我早年踩过最蠢的坑,熬到凌晨三点改适配,刷新前台还是乱的,以为自己代码写错了来回折腾,最后才想起来织梦生成的是静态页,改完模板不更新缓存等于白改。
改完模板第一件事先去后台点一键更新所有静态页,再按ctrl+shift+delete清掉浏览器缓存再看效果,很多新手都栽过这个坑,纯纯的无用功。
别上来就闷头改代码,先看是全站崩还是单页崩,全站崩基本就是公共头部、底部的适配代码写错了,或者调用的公共CSS文件挂了,要是只有单页崩就单独找对应模板的问题就行。
要是只有列表模块乱就看列表循环标签是不是加了多余的固定宽度,只有正文乱就优先查图片、段落的行高宽度样式,还有很多人用网上扒的免费模板,里面带了一堆外部调用的CSS链接,人家源站一删你这边样式直接垮,碰到这种直接把CSS文件扒到自己本地存着,别调用外部资源,省得哪天莫名背锅。
别改完自己拿常用手机看了没问题就完事,多切几个尺寸试,320px的老安卓、375px的普通苹果、平板的768px尺寸都过一遍,还要试试横屏模式会不会乱,很多人只测竖屏,用户一躺平刷手机横过来直接排版崩,那功夫就白做了。
还有别忘了测交互元素的点击区域,移动端的按钮最小要做到48px宽高,别做的跟芝麻似的,用户点半天点不到也算适配故障的一种,别漏了这个细节。
上一篇: WordPress数据表丢失恢复
下一篇: EyouCMS站点图标更换
易频IT社区是综合性互联网IT技术门户网站,专注分享网络技术、服务器运维、网络安全、编程开发、系统架构、云计算、大数据等行业干货,实时更新IT行业资讯、零基础教程、实战案例,为IT从业者、技术爱好者提供专业的学习交流平台。
Copyright © 2021-2026 易频IT社区. All Rights Reserved. 备案号:闽ICP备2023013482号 网站地图