如何在PC上 开发 Discuz X3 触屏（touch）版 页面

学习NO.1

以前从不写文章，因为懒呗~

曾经我是一名菜鸟，或许现在依然还是菜鸟。以前我会觉得，文章是大牛写的，我写出来的是文章吗？最多只能算是心得。

直到昨天，我上网搜索，在pc浏览器查看discuz X3 手机版页面，居然一个结果都没搜索到，罢了，或许牛人不屑于去写，一般站长也没研究这么多。

好吧，既然他们都不写，那就我来写一下吧！

Discuz源代码从X2 --- X3 变化不太大，因此研究过X2的，X3基本没啥难度，因此对于源代码我也没啥好讲的。

----------------------------------------------------------以下才是正式教程----------------------------------------------------------

1.如果想在PC浏览器查看手机版页面，首先要在Discuz管理后台启用手机版功能，然后才能看到手机版。

2.然后怎么在浏览器查看手机版呢，打开一般都是pc版吧，这个疑问很好解决，现在的浏览器都有切换UA（user-agent）的功能，程序判断是否手机就看这个UA。

这里我推荐用chrome浏览器，（实话说吧，前端开发不用chrome，你还是前端开发员吗）。

打开chrome浏览器

如何在PC上 开发 Discuz X3 触屏（touch）版 页面

右键页面空白处，选择审查元素，然后点击右下方的齿轮，就能出来上图的界面，Android2.3就是当前选择的UA.这样我们就能让浏览器变成跟手机差不多了。当然这个审查元素的调试窗口不能关，关了UA就不生效了，但是一般调试页面时，这个调试窗口是必须的。如果你还是觉得麻烦，那就装一个切换UA的chrome扩展吧。

3.切换UA后，刷新discuz页面你会发觉已经去到了手机版，但怎么也切换不到触屏版，为啥呢，为了这个我调试了半个多小时，终于找到了元凶。

请看到discuz代码目录中 static/js/mobile/common.js文件的头两行。

• var supporttouch = "ontouchend" in document;  
• !supporttouch && (window.location.href = 'forum.php?mobile=1');
  

罪魁祸首就是这个ontouchend，这个是只有手机才会有的事件，pc浏览器怎么也是不存在的，因此就永久跳到了标准版去了。所以，只要我们将这两行去掉，想要开发discuz什么页面都不是问题了。

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！ 如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！