• 本说明，针对v3.7；(预计：[下月]5月发布)

序言：

响应式网页，移动优先 想想都很感动！ 但是，维护与制作的辛酸，谁又能知到？

• 先看看别人的文章，热热身：

• 响应式布局 http://baike.baidu.com/item/响应式布局?sefr=enterbtn
• 静态、自适应、流式、响应式四种网页布局有什么区别？ https://zhidao.baidu.com/question/1574288999275182780.html
• 折腾响应式布局设计 http://caibaojian.com/356.html

• 下面看看本系统的各种应对

PC经典版 + 手机版(移动版)

• 不用多说；

• PC经典版：按主流PC电脑的宽度布局)
• demo : http://txmao.txjia.com/chn.php
• 手机版：按移动设备主流宽度布局
• demo : http://txmao.txjia.com/mob.php

• 问题：Html页面，识别移动设备，自动跳转？

• 情景：我用手机，访问pc产品页，要自动跳转到手机版的产品页
• 本系统实现：pc模板，加一行js：<script>var _pbase={}; _pbase.rdmob=1;
• demo : 演示站：经典版(/chn.php) 产品详情 … 拿手机测试吧！
• 更高级点js代码如：
• 》可用js代码参数：_pbase.jscode='if(_cbase.run.isRobot){alert("自定跳转")}';
• 》可用条件：_cbase.run.isRobot, _cbase.run.isMoble, _cbase.run.isWeixin, _cbase.run.mobDir

• 条件和次生问题：

• js页面自动移动端跳转，手机版要有对应的展示页面；
• 同一个内容（新闻/产品），有两个不同地址，但排版不同，对优化影响怎样？
• 对SEO：是否让一个版本的页面，设置不要搜索，不要收录？

动态页:自动移动端适配

• 效果

• 同一url地址(动态)，自动识别移动端，绑定各自模板
• PC设备，自动显示模板A；移动设备，自动显示模板B
• url地步不变，两套模板（当然甚至3套或更多？！）

• 本系统

• 首页，会员中心，中文文档：此方式实现
• 英文文档：后续实现（制作移动版模板）

• 配置：

• 每个PC模板，对应做一个移动模板，用统一后缀
• 统一后缀设置：'tmfix' => '-mob', // 移动适配-模板后缀
• 见文件如：/skin/dev/_config/va_home (以模块为单位设置)

• 进阶DIY：

• 因为只有动态页，才可绑定不同模板；
• 提示：配置伪静态，达到静态url优化效果

响应式:移动设备适配

• 效果:

• 只一套模板，适应 PC设备/移动设备
• 利用js,css3,html5技术
• 旧浏览器不兼容，或兼容不好

• 本系统

• 起始页, 安装页，错误提示页，工具页 等简单页面用这种方式
• 后台管理：目前登录页是这样；后台其它页面：后续改进模板实现

• 看看其它系统

• 布局简单，如很多国外系统，可用这种方式布局；
• 如：php.net, apache.org, bootcss.com,
• 国内很多门户系统：应该不适应
• 我就不相信，新浪首页，网易首页，百度新闻首页这些结构，看怎样做成 响应式？
• 其实，国内这些页面，都用了跳转（到了另一个地址）

抉择！！！

• 本系统状况和态度
  • 本系统，只根据各种需求，再表达这些需求功能；
  • 具体运营，页面/模板要怎么策划，由运营者决定！
  • 本系统页面，也主要用于演示。