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

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

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

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

打开chrome浏览器

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

3.切换UA后，刷新discuz页面你会发觉已经去到了手机版，但怎么也切换不到触屏版,请看到discuz代码目录中 static/js/mobile/common.js文件的头两行。

[html] view plain copy 在CODE上查看代码片派生到我的代码片

var supporttouch = "ontouchend" in document

!supporttouch &&(window.location.href = 'forum.php?mobile=1')

　就是这个ontouchend，这个是只有手机才会有的事件，pc浏览器怎么也是不存在的，因此就永久跳到了标准版去了。

所以只要将这两行去掉，想要开发discuz什么页面都不是问题了。

在手机版中调试Discuz后台管理数据混乱，可以按照以下步骤进行：

打开手机版Discuz后台管理页面；

点击页面右下角的“电脑版”按钮，切换到电脑版页面；

在电脑版页面中，按下F12键，打开浏览器的开发者工具；

在开发者工具中选择“移动设备模式”，选择合适的手机模拟器，模拟手机浏览器中的效果；

刷新页面，在控制台中查看是否有报错信息，如果有，根据报错信息进行相应的调试和修复；

如果没有报错信息，可以使用“元素审查”工具查看页面元素的样式和布局，根据需要进行修改和调整；

调试完成后，可以保存修改并切换回手机版页面，查看效果是否符合预期。

需要注意的是，在调试过程中，要尽量避免在手机版页面中进行修改和调试，以免影响正常使用。建议在电脑版页面中进行调试后再切换回手机版页面进行查看。

---