【问题标题】：noob's questions on using jquery mobilenoob关于使用jquery mobile的问题
【发布时间】：2011-07-28 18:13:31
【问题描述】：

在我开始之前必须解释一下，我是一个相对菜鸟，在 Web 开发方面经验较少。我正在开发的某个站点需要基于触摸的设备（即 iphone、ipad、android 手机和平板电脑）的 swipeleft 和 swiperight 功能。为了实现这一点，我被建议使用 jQuery mobile，这听起来不错，因为我是 jQuery 的粉丝。然而，尽管所有谷歌都可以给我，我还是要求澄清以下内容

文档类型在使用时是否必须为 html 5 data-role 等属性
我的网站大量使用 jQuery 和 jQueryUI，并将 jQuery mobile 扭曲了实际实现的设计布局。
我无法为移动流量和常规流量分离视图层。
如果 jQuery mobile 适合基于移动设备的使用影响正常的设计和功能什么是最好的方法测试站点的多个基于触摸的设备（模拟器也许）。

从这个很棒的地方用简单的英语写一些细节会很棒...... 提前致谢！

编辑

为了进一步深入研究我的问题，一个用于滑动功能的 jQuery 插件（如 touchSwipe 或 WipeTouch）将在此处帮助我。如果我已经用我的代码实现了插件，那么从 iPad 或 Android 手机测试功能的最佳方法是什么。说一些插件，比如 IE 模拟器 for firefox，可以通过鼠标拖动识别滑动手势（只是贪婪和绝望）

再次感谢...

【问题讨论】：

标签： spring-mvc jquery-mobile velocity

【解决方案1】：

如果您真的想为桌面/移动设备分离视图，我在这里看到了http://detectmobilebrowser.com/ 的建议，但我没有使用它。这提供了以各种语言或 JavaScript 在服务器端执行此操作的代码。

jQuery Mobile 的主要目的之一是提供特定于移动设备的 UI；因此，如果您尝试将两个样式表都放在那里，样式肯定会以各种方式与您当前的模板发生冲突。如果您只想在当前站点上添加滑动支持，那么可能有很多 jQuery 插件可以帮助您。

回复：HTML5，来自 jQM 文档，

jQuery Mobile 网站必须以 HTML5 'doctype' 开头才能完整充分利用框架的所有功能。（较旧的设备与不理解 HTML5 的浏览器会安全地忽略 'doctype' 以及各种自定义属性。）

【讨论】：

感谢@RwwL 和@Peppered Lemons 的回复...我的麻烦是我无法将桌面和移动设备的视图分开...完全超出了我的范围...一定会签出未来的链接和涟漪......仅用于滑动功能的 jQuery 插件会帮助我通过大多数基于移动的设备吗？现在我没有确切的目标受众列表，但我可以假设它主要用于基于 iOS 和基于 Android 的手机和平板电脑......是的，我的设计在尝试将它与我的 HTML 和Firefox 中的自定义脚本....IE 不提...
对不起，我错过了这条评论；几天不见了。听起来很有可能只需要一个滑动功能插件就可以满足您的需求。让我们知道结果如何。
快到了...接近但到目前为止...link

【解决方案2】：

JQuery 移动对于 Web 应用程序来说是可以的，但是在 JQuery Mobile 中的应用程序上做了更多之后，我现在建议不要使用它。有很多手机不完全支持 JQuery Mobile，你会遇到很多方法和页面布局的问题。大多数黑莓手机和许多 HTC 手机以及许多其他手机都不支持 JQuery Mobile。

检测您是否使用台式机/移动设备非常容易。只需在页面加载时查找user agent，并相应地重定向。如果你愿意，我可以给你一些基于用户代理重定向的方法。

如果您的页面格式不正确，JQuery Mobile 可能会扭曲您当前的设计。 JQuery Mobile 将添加许多额外的 css，解决这个问题可能会被证明是具有挑战性的，尤其是对于其他 JQuery 元素。对话框是 JQuery Mobile 与 JQuery 不同的一个例子

最好的方法是通过模拟器进行测试。 Google Chorme 有一个我倾向于使用的 Ripple 附加组件，尽管它不是最可靠的。因为有这么多不同的手机，有时尝试在尽可能多的实时手机上进行测试会更容易（不同的版本、平台等在使用 JQuery Mobile 时可能会表现得截然不同）

【讨论】：