EyouCMS移动端页面错乱 老司机整理的8个高效排查方案

很多用EyouCMS搭模板站的朋友都碰到过这事吧？PC端整得漂漂亮亮像模像样的，掏出手机一刷直接歪瓜裂枣——要么导航栏飞了，要么图片挤成渣，要么文字叠成一团乱麻，客户点开秒退的心都有。

先别慌改代码！先看这两个最容易被忽略的入门坑

别上来就盯着style文件薅头发，很多时候都是“新手村怪”没打死就往外跑。

检查后台有没有开启移动端自适应功能

对哦，EyouCMS后台自带基础适配开关的，很多刚上手的朋友连这个都没摸过。你去后台找“系统基本参数”→“核心设置”，往下拉有个“是否开启伪静态和移动端静态自适应”，哦不对单独是“是否开启移动端适配”，选是才对。要是选了否，你手机上显示的其实就是PC端缩小版的硬套，肯定乱。

确认模板文件夹有没有完整的mobile目录

EyouCMS的默认适配逻辑是：有mobile目录就调用单独的移动端模板，没有就用PC端的响应式或者不缩。很多人买模板的时候只看PC目录，忽略卖家有没有打包手机版，或者自己手滑删了几个文件。去FTP或者后台的“模板管理”→“文件管理”里翻一翻，根目录下的template文件夹里，你的当前模板名文件夹下面，必须有个叫mobile的子文件夹，里面文件得和PC端对应上，比如index.htm、list_article.htm这些。

开启了适配有了模板？那就排查模板内部的细节

这部分稍微有点技术，但都是老司机踩烂的坑，跟着操作就行。

看头部有没有加正确的viewport元标签

viewport就像手机屏幕的“眼镜”，没戴或者度数不对，看到的肯定是糊的歪的。去mobile目录下的common.htm或者footer.htm、header.htm，反正找头部被所有页面引用的那个公共文件，看标签里有没有这行代码：

```html ```

没有就赶紧加上，有了就检查参数有没有改坏，比如initial-scale写成2.0肯定会放大到离谱，user-scalable写成yes容易被用户放大变形。

别混用PC端的固定宽度样式

很多套模板的朋友喜欢直接复制PC端的CSS到mobile目录，这就像把42码的鞋硬塞给36码的脚，能舒服吗？检查mobile目录下的css文件，有没有width:1200px这种写死大数字的，有的话改成百分比，比如width:100%，或者用max-width限制最大宽度，比如max-width:1200px，这样小屏自动缩小，大屏也不会太宽。

图片别忘记做移动端自适应

PC端放的2000px宽的banner图，手机上肯定占满屏幕还溢出。给所有图片加个全局的自适应样式，简单粗暴有效。在mobile目录下的main.css或者style.css开头加上：

```css img{ max-width: 100%; height: auto; display: block; } ```

display:block是为了消除图片下面默认的几像素空白，强迫症必备。

排查浮动布局有没有清干净

浮动这玩意儿老掉牙了但很多模板还在用，清不干净就会导致元素乱跑，手机上更明显。看有没有浮动的div，比如float:left或者float:right，在它的父元素后面加个清除浮动的空div，或者给父元素加个overflow:hidden（别乱用，可能会隐藏溢出的有用内容），或者用更现代的flex布局替换掉浮动，这个以后有空再讲。

检查有没有未闭合的HTML标签

这也是个低级但致命的错误，一个