jquery - 支持桌面和移动设备的单个 JQuery 页面的提示？

Question

我目前有一个网站托管一个页面，我希望该页面同时为桌面和移动浏览器提供服务。桌面设计和实现已经完成，并使用JQuery。

当用户在 JQuery Mobile 支持的移动浏览器上访问时，我希望此页面能够使用不同的布局。

我正在尝试找出执行此操作的最佳方法，但似乎无法找到有关最佳实践的信息。我能找到的所有现有文档/指南都假设您正在编写的 jQuery 页面专门支持移动浏览器，因此不解决桌面格式问题。

看起来显而易见的选项:

1. 同一页面，但只是在现有内容之上添加额外标记，以针对移动设备重新格式化
2. 同一页面，但带有附加标记，重复现有内容，但格式适合移动设备。如果是桌面浏览器，则非移动内容将被隐藏/不呈现。
3. 对移动设备与非移动设备进行一些动态检测，然后在 2 个不同的页面(桌面与移动)之间进行路由

我认为#2 可能是最简单的，但我不喜欢页面中重复内容的想法。 #1 认为我可以用一堆标记来增强现有内容，神奇地使其具有适用于移动设备的格式(同时仍然支持桌面)，这似乎是不现实的。

如果您能提供有关最佳实践的任何提示和指南，我将不胜感激。

澄清:假设我没有使用 Rails、ASP.NET MVC 等。

Answer 1

CSS 媒体查询非常适合此目的。 (注意，它们是 CSS3)基于查看代理的大小(并且它会动态更新!)某些内容可以隐藏或显示，使其基本上成为您的选项 #1 和 #2 的变形。你会有一个大的、功能齐全的桌面布局，带有样式和 jQuery，当屏幕很小时(意味着它是一部手机或一个 Nerd 调整浏览器的大小)，你会隐藏一些更详细的内容并重新设计一些内容，也许会显示一些其他的东西。在此处阅读有关媒体查询的信息:http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html编辑:为了澄清，您可以使用媒体查询完全自定义元素，因此，在桌面尺寸下，div 可能具有虚线边框、圆角、10px 填充等，而在手机上 div 具有 1px 填充、实心边框等