以下是PC与WAP模板切换的完整实现方案,结合主流CMS系统和前端框架的最佳实践:
一、设备识别与路由控制
UA检测技术
通过navigator.userAgent匹配关键词(如/mobile|android|iphone/i)判断设备类型
推荐封装为工具函数,同时检测屏幕宽度(如window.innerWidth < 768)处理平板等边缘情况
服务端重定向
PHP示例:检测到移动端访问PC页面时,通过header("Location: m.example.com")跳转
需在.htaccess中配置重定向规则,避免SEO重复内容问题
二、CMS系统实现方案
系统 PC/WAP切换方式
织梦CMS 模板文件按pc/和wap/目录分离,后台刷新后自动生成头部切换按钮
ThinkCMF 修改common.php中的cmf_get_current_theme()函数,动态返回mobile或pc主题
PageAdmin 文件命名规则:index.mobile.cshtml和index.cshtml自动适配设备
三、前端工程化方案
Vue.js项目
目录结构分离/pc/和/mobile/视图组件,通过路由守卫动态加载对应组件
使用webpack多入口配置,分别打包PC/WAP的静态资源
javascript
Copy Code
// 设备检测工具函数(utils/device.js)
export function detectDevice() {
const isMobile = /mobile|android|iphone/i.test(navigator.userAgent);
return isMobile ? 'mobile' : 'pc';
}
响应式降级方案
同一URL下通过媒体查询加载不同样式,但需保持DOM结构一致性
优先使用栅格系统(如Bootstrap)实现布局自适应
四、SEO与性能优化
元标记配置
添加<meta http-equiv="mobile-agent">声明移动版URL,避免搜索引擎误判
规范使用canonical标签关联PC/WAP页面
性能差异处理
WAP端需禁用PC端复杂动画,图片使用srcset按分辨率适配
PC端可保留jQuery等库,移动端推荐Zepto等轻量替代方案
五、维护建议
同步更新机制
使用rsync等工具保持两套模板的内容一致性
建立自动化测试流程,验证各设备端渲染效果
混合开发模式
核心模块采用响应式布局,差异化功能通过设备类型条件加载