使用knockout.js查看jQuery移动/平板电脑/桌面的流程

Question

我正试图通过完全重新架构我的网站来为移动用户修复我的自定义购物车流程。我为我的所有手机，平板电脑和桌面用户选择了jQuery mobile。

实际流量相当简单，包括付款选择（贝宝或信用卡），地址输入，付款输入，物品确认..

我希望为用户的屏幕大小量身定制绝对最佳的体验。

对于手机用户，我有三到四个概念性“页面”信息可以很好地映射到jQuery ui-page，但是在平板电脑中我想要显示两个或更多ui-page个项目立刻 - 也许是以一种不同的顺序，随着碎片移动。

一些直接的并发症浮现在脑海中：

• 如果我使用jQuery页面并且用户在桌面上，并且他将窗口调整为小型应该发生的事情。反过来会发生什么。我是否将人们引导到完全不同的流程以用于小屏幕和大屏幕或尝试使用css / javascript实时调整
• 考虑用户是否在手机上犯了错误，或者想要更换购物车。他会向左滑动，我需要进入他最后的逻辑步骤。
• 我认为根据屏幕尺寸尝试制作棘手的float css和forcing hidden jQuery pages to be shown会很快回来并咬我。
• 网站的其余部分尚不存在，例如添加到购物车之类的内容，我想找出一个可以在整个应用程序中很好地运作的策略。

我目前最好的想法是：

• 创建两个单独的“流程”。首先是将使用真正的jQuery页面的手机。第二个是桌面，它只是一个页面，或者可能是两个。
• 我认为第一个“页面”是一个完全响应的设计，可以扩展到桌面，但只包含电话用户的第一个逻辑步骤。所以我会隐藏大部分的小屏幕页面。显然，只有手机用户才能看到导航到第二个和第三个ui-page项目的按钮。这将导致跨多个页面的重复字段，但我很好。这将为手机用户提供他们期望的正确页面体验和历史记录管理，桌面用户只需查看第一个ui-page。
• 为了让这个工作得很好，我需要将KnockoutJS与单一的全站'推车'模型一起使用。这样可以更容易地维护两个不同的流，并且如果我在多个页面上重复相同的内容，它将在用户切换页面时自动更新。

好主意/坏主意？我可以看一下移动结账的好例子，或者任何jQuery / Knockout专家都有建议或看到我应该注意的任何明显的危险。